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

Question

我无法获得一个div以适应其中文本的大小。

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

1。装入外部div。

[2。在包装纸的中间居中。

[我遇到的问题是，当我按照视图的宽度玩耍时，在文本和div的边框之间出现了很大的不需要的间隙，如您在此处看到的那样：

此外，如何防止这种差距；如何在大div内使div居中，使其尺寸足够大以适合其中的文本？

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

我的HTML代码：

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

我的CSS代码：

.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;
}

谢谢！

（（注：我想使用纯HTML和CSS完成此操作）

Answer 1

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

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

}

或

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

}

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

或

使用overflow-x：隐藏；应该用不错的方式包装文本，使用CSS可以用很多方法包装长文本，这也是一个有用的链接here is a useful link

.divForText{
  border: 1px solid black;
  display: inline-block;
  text-align: left;
  padding: 15px;
  overflow-x: hidden;
  word-wrap: break-word;  
}