html - 如果达到最大宽度，仅将文本换行到新行？

Question

我有一个像这样的简单 div:

<div id="containerDIV">
    <div>THIS IS SOME TEXT</div>
</div>
...
#containerDIV {
    max-width:200px;
}

但是在运行代码时，页面上的文本显示如下:

THIS IS
SOME TEXT

为什么会这样？尽管文本尚未达到最大宽度，但它似乎换行了。如何强制文本在一行中，直到达到最大宽度，然后移到下一行？

这是一个概述问题的 fiddle : http://jsfiddle.net/v2p2xvjh/1/

我尝试按照建议设置最小宽度，但是当字段中显示短文本时，这看起来很奇怪。由于容器 div 现在对于短文本来说太宽了。

Answer 1

更新 #1

因为您使用的是“position:absolute”。如果没有定义宽度，这将强制您的 div 的宽度为 0px。 max-width:200px 将允许 0px 到 200px 之间的任何内容。如果您使用 min-width:200px，您将允许从 200px 到无限 px。

这是 jsFiddle:http://jsfiddle.net/v2p2xvjh/2/

旧

问题似乎与您使用的字体大小或字体系列有关。如果父元素的宽度小于 200px，也可能会受到影响。

在 jsFiddle 上测试它按预期工作:https://jsfiddle.net/0wg3hodx/1/

<div id="containerDIV">
    <div>THIS IS SOME TEXT</div>
</div>

#containerDIV {
    max-width:200px;
}

这是因为有足够的空间让它达到 max-width: 200px。

您需要查看周围元素的 CSS(宽度/填充/边距/字体)来解决问题。