#tooltip
{
position: absolute;
width:auto;
min-width:50px;
max-width:250px;
padding:10px;
background-color:#eee;
border:1px solid #aaa;
}
基于这种风格,我希望我的工具提示缩小或增长以适应内容,低至50px或高达250px。但是,当内容换行到下一行时,max-width属性似乎超出了我的width属性。当句子末尾的单词很长时,它看起来像留下了一堆填充(见截图),这是一种美学的东西。这是正常的行为吗?
是的,这是正常行为。
浏览器将尝试将文本内嵌在框内,直到达到其最大允许宽度250px,然后将任何不适合第一行的文本换行到下一行和后续行。 (如果没有足够的文本来达到最大宽度,那么width: auto
会使框缩小以适合该文本量。)
但是,在包装它之后,该框不会再缩小以适合文本,因为文本换行不会以这种方式工作。这意味着盒子的width
计算为250px,并且只是因为你的CSS声明它最多只能是250px。它不是计算到一些较小的值,等于包装后的文本宽度,然后被max-width
覆盖。
我认为你无法改变这种行为。
尝试使用其中一个:
width: max-content;
width: min-content;
width: available;
width: fit-content;
它们不是100%兼容,但前缀或多或少地解决了这个问题。