最大宽度调整以适应文本？

Question

不是最好的头衔，但无论如何......

我的元素包含max-width和一些文字。

如果文字长度超过一行，我得到：

----------------------------
|My text here, hello       |
|everyone!                 |
----------------------------

换句话说，它占据了最大的最大宽度，但由于单词向下移动，右侧有一个空白区域。

有没有办法让它发生呢？

---------------------
|My text here, hello|
|everyone!          |
---------------------

Answer 1

单独使用CSS

不可能

According to BoltClock in this answer，这是不可能的。这种解释是有道理的。对于要开始的换行，该行需要达到max-width设置。完成后，它会换行，但它不会重新收缩，因为它正在使用该大小来计算换行。

据我所知，这仍然不可能。

Answer 2

我还没有找到一个不需要同时使用包装器元素和JavaScript的方法，但是这个方法可能适合你的需要。

<div id="example">
    <span id="content">My text here, hello everyone!</span>
</div>​​​​​​​​​​​​​​​​​​​​​

​var content = document.getElementById("content");

content.parentNode.style.width = content.offsetWidth + "px";​​​​

a working example

Answer 3

感觉word-break就是你所需要的http://caniuse.com/word-break虽然它是CSS3的新属性但尚未获得如此广泛的支持

Answer 4

使用上面的解决方案，但在内部元素集显示：table-caption，并且DON＆＃39; T set max-width：0px。这将包括safari支持（以及Firefox 17和IE8 / 9和Chrome）