HTML5/CSS3如何強制文本需要一定的寬度進行渲染

Question

我正在做一些網頁開發並遇到了美學問題。爲了測試，我縮小了窗口，看看CSS如何響應。當我這樣做時，文本區域的寬度會減小到0.在低寬度時，大部分文本呈現得較低，但是段落的主要詞語「也」在單獨的窗口大小範圍內保持較高。 （估計330-350px）

當你減少窗口的寬度，直到邊緣接近山羊的圖片時，可以在這裏看到問題（鏈接刪除）。

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> 

OR

這是發生因爲有對<div>一個float: left風格，其中包含您<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>