无法创建适合文本大小的Div

Question

我无法使div适合文本大小。

我有2个div，我希望内部div会：

1。使它的大小适合内部文本。

2。在更大/包装的div中居中。

问题是，很多时候，当我使用窗口的宽度玩游戏时，在文本和div的边框之间都出现了巨大的空白，就像你在这里看到的那样：

https://i.ibb.co/sHMQ766/Div-Gap-Problem.jpg

如何防止该间隙，并仍然使div居中于大div并使其大小适合文本？

这是我的小提琴测试：https://jsfiddle.net/gv1xLd8s

.wrapper {
  border: 1px solid blue;
  text-align: center;
  overflow: hidden;
  padding: 25px;
  margin: auto;
  width: 50%;
}

.divForText {
  border: 1px solid black;
  display: inline-block;
  text-align: left;
  padding: 15px;
}

<div class="wrapper">
  <div class="divForText">
    Text... Text... Text... Text... Text... Text... VeryLongWordToCheckTheGapProblemOnLeftAndRightSides Text... Text...
  </div>
</div>

谢谢！

（（注：我不需要JavaScript，只有HTML和CSS）

Answer 1

您可以使用断字：全部中断；因此您更正后的CSS如下：

.divForText{
  border: 1px solid black;
  display: inline-block;
  text-align: left;
  padding: 15px;
  word-break: break-all

}

[如果适合您，别忘了标记为已回答，因为其他人可以帮助他们。