长话不浮,它们比短语更密集吗？

Question

我希望在一个方框内显示一些文字.

所以,我用<article>标签包装我的文字

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

并将其设置为固定宽度块,使长字断开,并在溢出时隐藏文本:

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

到现在为止还挺好.文本正确包装,长单词分解和换行.

当我在文本前放置浮动图像时会出现问题.

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

方便地设计在文本之前漂浮.

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

当文本只有短文字时,它会浮动并正确包裹.但长话不再漂浮,它们沉入图像的底部.

看到这个小提琴http://jsfiddle.net/s0pvgoqu/23/

长话比短片更密集吗？

---

编辑我正在编辑我的问题,在我接受的答案中包含一些补充信息.

似乎解决这个问题的唯一方法就是用<wbr>trags 打破长话.

这是我<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 解决方案，因此可能并不适合所有情况，但它也适用于浮动内容。