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

Answer 2

添加分词：break-all;

article {
    display: inline-block;
    padding:12px;
    margin:2px;
    width:160px;
    height:160px;
    background-color:#eee;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
}

冗长的话语不会浮动，它们比短语更密集吗？

2 个答案: