换行时的 CSS 宽度/最大宽度？

Question

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

基于这种样式，我希望我的工具提示能够缩小或增大以适合内容，最小为 50 像素或最大为 250 像素。但是，当内容换行到下一行时，最大宽度属性似乎覆盖了我的宽度属性。当句子末尾的单词很长时，这是一种美学上的事情，看起来它留下了一堆填充(见截图)。这是正常行为吗？

Answer 1

是的，这是正常行为。

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

但是，框在环绕后不会再次收缩以适合文本，因为文本环绕不能那样工作。这意味着框的 width 被计算为 250px，仅 因为您的 CSS 声明它最多只能是 250px。它不会被计算为等于 text 宽度的较小值，然后被 max-width 覆盖。

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