换行的CSS宽度/最大宽度？答案

【问题标题】：CSS Width / Max-Width on Line Wrap?换行的CSS宽度/最大宽度？
【发布时间】：2018-09-13 18:43:55
【问题描述】：

#tooltip
{ 
    position: absolute;
    width:auto;
    min-width:50px;
    max-width:250px;
    padding:10px;
    background-color:#eee;
    border:1px solid #aaa;
}

基于这种样式，我希望我的工具提示可以缩小或扩大以适应内容，最小为 50 像素或最大为 250 像素。但是，当内容换行到下一行时， max-width 属性似乎覆盖了我的 width 属性。当句尾的单词很长时，这是一个美学问题，看起来它会留下一堆填充物（见截图）。这是正常行为吗？

【问题讨论】：

标签： css

【解决方案1】：

是的，这是正常行为。

浏览器会尝试将您的文本内嵌在框中，直到达到其允许的最大宽度 250 像素，然后将无法容纳在第一行的任何文本换行到下一行和后续行。（如果没有足够的文本来达到最大宽度，那么width: auto 会导致框缩小以适合该数量的文本。）

但是，在换行后，框不会再次缩小以适应文本，因为文本换行不能这样工作。这意味着盒子的 width 被计算为 250px，并且 only 因为您的 CSS 声明它最多只能是 250px。它不会被计算为小于等于 text 宽度的值，然后被 max-width 覆盖。

我认为您无法改变这种行为。

【讨论】：

感谢您的确认！在别处找不到答案。
用 CSS 可能无法改变这种行为，但可以用 JS 来完成。 stackoverflow.com/q/33244477/3597276
我不太明白。 causes the box to shrink to fit just that amount of text 还是 the box will not shrink again to fit the text after wrapping it？两者都不可能是真的。在我看来，您回答的第 2 段和第 3 段似乎是矛盾的。
@Mikhail Batcer：是的，我在那儿感到困惑（这是一个非常古老的答案，我不得不重新阅读该问题以进行复习）。我完全的意思是，“导致框缩小以适合该数量的文本”仅适用于首先没有足够的文本来包装的情况。这意味着，实际上，根本没有包装。并且“包装后盒子不会再次缩小以适合文本”仅在包装确实发生时适用，因为盒子受到最大宽度的限制。所以，你是对的，两者都不可能是真的——因为它们是相互排斥的。
@BoltClock 是的，现在很清楚了。多么可惜的包装是这样工作的……它使它变得不那么有用了。

【解决方案2】：

尝试使用其中之一：

width: max-content;
width: min-content;
width: available;
width: fit-content;

它们不是 100% 兼容，但前缀或多或少地解决了这个问题。

来源：https://developer.mozilla.org/docs/Web/CSS/width

【讨论】：

设置width: max-content 和max-width: Xpx 解决了我的问题