28 
#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 属性。当句尾的单词很长时，这是一个美学问题，看起来它会留下一堆填充物（见截图）。这是正常的行为吗？

在此处输入图像描述

4

2 回答 2

31

是的，这是正常行为。

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

但是，包装后框不会再次缩小以适合文本，因为文本换行不能以这种方式工作。这意味着盒子width被计算为 250px，只是因为你的 CSS 声明它最多只能是 250px。它不会被计算为某个较小的值，等于换行后的文本宽度，然后被max-width.

我认为您无法采取任何措施来改变这种行为。

于 2012-09-11T21:03:14.760 回答
4

尝试使用其中之一：

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

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

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

于 2017-10-12T08:37:06.180 回答