HTML5/CSS3 如何强制文本需要一定的宽度才能渲染

Question

我正在做一些网络开发，遇到了一个审美问题。为了进行测试，我缩小了窗口并查看 CSS 的响应方式。当我这样做时，文本区域的宽度减小到 0。在低宽度下，大部分文本呈现得更低，但段落的前导词“also”在窗口大小的良好范围内仍然单独高得多。 (估计 330-350 像素)

当您减小窗口的宽度直到侧边靠近山羊的图片时，可以在此处看到问题(链接已删除)。

JavaScript 解决方案受到赞赏，但不是首选。

我尝试将文本放在一个跨度中并为其指定一个最小宽度属性，但它不起作用，即使按照建议使用 display : block; here .

在 Firefox 中测试。

Answer 1

如果您的文本是静态的，您可以使用

<div>
Also&nbsp;chickens, turkeys, pigs, a fig, an apple, and a couple of citrus trees on our farm.<br>
<br>
</div>

或

发生这种情况是因为有一个 float: left <div> 上的样式其中包含您的 <img>标签

<div style="float:left; padding-right:10px; max-width:575px; width:60%; min-width:320px; padding-bottom:20px;">
<img ...
...
</div>

如果您删除此样式，它会正常工作，即:

<div style="padding-right:10px; max-width:575px; width:60%; min-width:320px; padding-bottom:20px;">
<img ...
...
</div>