Html 仅在达到最大宽度时将文本换行到新行？

我有一个简单的div，如下所示：

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

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

下面是一个提琴，概述了问题：

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

更新#1

因为您使用的是“位置：绝对”。如果没有定义宽度，这将强制div的宽度为0px。最大宽度：200px将允许0px到200px之间的任何值。如果使用最小宽度：200px，则允许从200px到无限px

以下是JSFIDLE：

旧的

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

在JSFIDLE上进行测试，结果与预期一致：

这是一些文本
#集装箱四{
最大宽度：200px；
}

这是因为有足够的空间使其达到最大宽度：200px

---

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

您看过我的小提琴了吗？我使用的字体与您在该示例中使用的相同。@SidneydeVries它显示在我屏幕上的一行上。我在更新小提琴时出错。你现在能检查一下吗？@SidneydeVries这是最大宽度：200px。如果要强制设置最小宽度，请使用最小宽度：200px。“最大宽度”将允许从0px到200px的任何内容。是的，但是如果文本很短，div将太宽。嗨-你是否找到了一种方法来实现这一点，即文本只有在达到最大宽度后才会换行。

THIS IS
SOME TEXT

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

#containerDIV {
    max-width:200px;
}