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

【问题标题】：Unable to create an HTML Div Element that Fits to the text size无法创建适合文本大小的 HTML Div 元素
【发布时间】：2020-01-03 20:56:30
【问题描述】：

我无法让 div 适合其中的文本大小。

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

1. 适合外部 div。

2.在包装 div 内居中。

我遇到的问题是，当我调整视图的宽度时，文本和 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 来实现）

【问题讨论】：

仅使用 javascript，大小在不同浏览器上更改为默认字体
很难准确理解您的要求。您需要大声朗读您的问题，并进行相应的编辑。
@Aft3rL1f3 我不明白我的问题有什么不清楚的地方，我还向您展示了一个很好的图像来说明问题，您是否尝试查看它？这张图有什么不明白的地方？
@Daniel 现在已编辑，阅读效果更好。图片确实有帮助。
@Daniel，我改变了对你的投票。原来你的拼写和语法太糟糕了以至于无法阅读。

标签： html css center

【解决方案1】：

你可以使用 word-break:break all;所以你更正的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;

}

如果对你有用，别忘了标记为已回答，因为其他人可以帮助他们。

或

使用溢出-x:hidden;这应该以一种体面的方式包装文本，使用 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;  
}

【讨论】：

对不起，但这不是我想要的解决方案。在您的解决方案中，单词被夹在中间......我不想那样。
@Daniel 如果您不想“剪切”中间的单词，并且也不想要空间，那么您对解决方案的想象究竟如何？
@Swetank Poddar 在这里，我想要一个类似以下的解决方案，将其与我原帖中的图片进行比较：i.ibb.co/hXZ1Jv6/untitled.jpg
那么不要使用 ( word-break: break-all ) 使用 ( word-break: break-word ) 来解决您正在寻找的问题
@Kai 当我调整视图的宽度时，我仍然在文本和右侧 div 的边框之间发现了一个很大的不需要的间隙。

【解决方案2】：

您的问题是由于没有空格的长单词而发生的，因此浏览器无法破坏它，并且它不适合行的其余部分，因此它会转到新行，留下很大的空间。

要解决这个问题，你可以使用这个 css

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

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

.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;
  hyphens: auto;
}

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

【讨论】：