css - 长字不浮，比短字密？

Question

我想在一个框中显示一些文本。

因此，我用 <article> 包裹我的文本标记

<article>
    <p>Here is my text ready to be boxed.</p>
</article>

并将其样式设置为固定宽度的 block ，使长单词断开，并在溢出时隐藏文本:

article {
   display: inline-block;
   width:160px;
   overflow: hidden;
   word-wrap: break-word;
}

到目前为止，还不错。文本正确换行，长单词换行。

当我在文本前面放置 float 图像时出现问题。

<article>
    <img src="img.png"></img>
    <p>Here is my text, now preceded by an image.</p>
</article>

样式方便地 float 在文本之前。

img {
   width: 32px;
   float: left;
}

当文本只有短词时，它会正确 float 和换行。但是长字不再漂浮，它们沉到图像的底部。

请参阅此 fiddle http://jsfiddle.net/s0pvgoqu/23/

长词比短词更密集吗？

---

编辑 我正在编辑我的问题，以便在我接受的答案中包含一些补充信息。

看来解决这个问题的唯一办法就是把长字用<wbr>打断悲剧。

这是我要插入的代码 <wbr>长词标签

/* insert word break hint tags in long words at num pos */
String.prototype.wbr = function(num) {  
  return this.replace(
    RegExp("(\\w{" + num + "})(\\w)", "g"), 
    function(match,submatch1,submatch2){return submatch1 + "<wbr>" +submatch2}
  );
}

Answer 1

我想到的唯一解决方案是使用 <wbr> 提示断字。

这当然不是 CSS 解决方案，因此可能不适合所有情况，但它也适用于 float 内容。