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

Question

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

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

1。装入外部div。

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

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

https://i.stack.imgur.com/OxOwd.jpg

您能看到右边的巨大空白吗？我希望它的尺寸​​像左侧的一样小。

如何防止出现此间隙，此外，如何使div居中于大div内，使其尺寸足够大以适合其内的文本？

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

我的代码：

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

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

希望我的问题得到理解。

1. 使用“断字：全部”不是解决方案，因为我不想在中间打断字。

2. 我想使用纯HTML和CSS来完成此操作，没有JavaScript。

谢谢！

Answer 1

如果您没有宽度限制，则可以从包装类中删除宽度限制，即50％。那么CSS将是

.wrapper{
  border: 1px solid blue;
  text-align: center;
  overflow: hidden;
  padding: 25px;
}

希望它会起作用。祝你好运

Answer 2

您的问题正在发生，因为单词长且没有空格，因此浏览器无法破坏它，并且它与其余行不匹配，因此它会转到新行，留下很大的空格。

要解决此问题，您可以使用此CSS

.divForText{
  ...
  hyphens: auto;
  ...
}

浏览器将在需要时自动添加连字符。

[文本...文本...文本...文本...文本...文本... VeryLongWordToCheckTheGapProblem-OnLeftAndRightSides文本...文本...

Answer 3

这里是代码。希望对您有帮助。如果有任何更改，请通知我。

.wrapper{
  border: 1px solid blue;
  text-align: center;
  overflow: hidden;
  padding: 25px;
  margin: 0 auto;
  display: inline-block;
  
}

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

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

Answer 4

我不确定这是否可以解决您的问题。

.wrapper{
border: 1px solid blue;
text-align: center;
padding: 25px;
margin: auto;
width: 77%;
}
.divForText{
border: 1px solid black;
display: inline-block;
text-align: left;
padding: 15px;
}