html - Div智能宽度

Question

see fiddle

html

<div class="e" style="left:5px;top:5px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbb</div>

<div class="e" style="left:5px;top:100px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>​

CSS

.e {
    font-size: 10px;
    font-family: arial;
    background-color: yellow;
    position: absolute;
    max-width: 300px;
}

您会注意到第二个 div 正好适合内容的大小，但在第一个 div 上，a 和 b 的右侧有一堆空白区域。这是因为 div 达到了 300px 的最大宽度，然后将 b 包装到第二行。包装很好，但我希望 div 然后缩小到 a 的宽度，这样右边就没有空白了。

是否有可能让它这样做？

在 Chrome 和 FF 中测试。

Answer 1

您可以避免处理宽度，因为我的理解是您正在寻找一种以令人满意的方式分隔文本的方法。

使用 word-break: break-all，当文本到达容器边缘时将其换行。

示例:

• demo on jsFiddle

引用:

• the CSS3 word-break property on Mozilla Developer Network