了解换行和 CSS 大小调整
在 CSS 中, width 和 max-width 属性定义元素的水平尺寸。当元素的内容超出其最大宽度时,它将换行到下一行。但是,如提供的示例所示:
#tooltip { position: absolute; width:auto; min-width:50px; max-width:250px; padding:10px; background-color:#eee; border:1px solid #aaa; }
当内容换行到下一行时,max-width 属性似乎会覆盖 width 属性,从而在换行行的末尾留下过多的填充。
正常行为解释
这种行为确实是正常的。浏览器尝试在元素内内嵌文本,直到达到允许的最大宽度。如果无法容纳第一行,则会换行并继续后续行。
但是,换行后,框不会再次缩小以适合文本。这是因为文本换行不允许这种行为。框的宽度计算为最大宽度值(在本例中为 250 像素),而不是基于换行文本的大小。
可能的解决方案
不幸的是,没有已知的 CSS 解决方案可以改变这种行为。由于文本换行的固有性质,浏览器以这种方式运行。
以上是为什么我的 CSS `max-width` 属性在文本换行后留下多余的填充?的详细内容。更多信息请关注PHP中文网其他相关文章!