css - 最大宽度调整以适合文本？

Question

不是最好的标题，但无论如何......

我有一个带有 amax-width和一些文本的元素。

如果文本长于一行，我会得到：

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

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

有什么办法可以让这种情况发生吗？

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

score 6 · Accepted Answer

仅靠 CSS 是不可能的

根据此答案中的 BoltClock，这是不可能的。解释是有道理的。要开始换行，行需要达到max-width设置。完成后，它会换行，但不会重新收缩，因为它使用该大小来计算换行。

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

score 3 · Accepted Answer

我还没有找到一种不需要同时使用包装器元素和 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";

score 0 · Accepted Answer

感觉就像word-break是你需要的http://caniuse.com/word-break虽然它是 CSS3 的新属性，还没有那么广泛的支持

score 0 · Accepted Answer

使用上述解决方案，但在内部元素上设置 display: table-caption，并且不要设置 max-width: 0px。这将包括 Safari 支持（以及 Firefox 17 和 IE8/9 和 Chrome）