最大宽度调整以适合文本？答案

【问题标题】：max-width adjusts to fit text?最大宽度调整以适合文本？
【发布时间】：2016-03-04 13:38:57
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

标签： css

【解决方案1】：

仅靠 CSS 是不可能的

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

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

【讨论】：

float doesn't work 要么。请记住，它必须是单行文本。
@Kolink--除非我遗漏了什么，float（以及所有其他人指出）在折叠到文本的宽度（无论是否为一行）方面工作得很好。这不是你想要的吗？用超宽的max-width 看this fiddle。它在 IE8/9、Firefox 17 和 Chrome 23 上为我折叠了最后四个 div...这就是你想要的，不是吗？
这正是我所追求的 ;) 如果一行太长而无法容纳。
@Kolink——目前似乎只有部分问题（不是完全跨浏览器）。查看我的更新。
@zooted：谢谢。我删除了那部分，因为你是对的，据我所知，这仍然是不可能的。

【解决方案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";

【讨论】：

【解决方案3】：

感觉 word-break 是你需要的 http://caniuse.com/word-break 虽然它是 CSS3 新属性，还没有得到如此广泛的支持

【讨论】：

【解决方案4】：

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

【讨论】：