线包装上的CSS宽度/最大宽度？

Question

#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属性.当句子末尾的单词很长时,它看起来像留下了一堆填充(见截图),这是一种美学的东西.这是正常的行为吗？

Answer 1

是的,这是正常行为.

浏览器将尝试将文本内嵌在框内,直到达到其允许的最大宽度250px,然后将任何不适合第一行的文本换行到下一行和后续行.(如果没有足够的文本来达到最大宽度,则width: auto会使框缩小以适合该文本量.)

但是,在包装它之后,该框不会再缩小以适合文本,因为文本换行不会以这种方式工作.这意味着盒子的width计算结果为250px,并且只是因为你的CSS声明它最多只能是250px.它被计算为一些较小的值,等于包装后的文本宽度,然后被覆盖max-width.

我认为你无法改变这种行为.

Answer 2

您将需要一些 JavaScript 才能获得所需的结果。

创建一个 Range 对象来测量内容的大小。相应地设置容器的宽度。

const range = document.createRange();
const p = document.getElementById('good');
const text = p.childNodes[0];
range.setStartBefore(text);
range.setEndAfter(text);

const clientRect = range.getBoundingClientRect();
p.style.width = `${clientRect.width}px`;

p {
  max-width: 250px;
  padding: 10px;
  background-color: #eee;
  border: 1px solid #aaa;
}

#bad {
  background-color: #fbb;
}

<p id="bad">This box has a max width but also_too_much_padding.</p>
<p id="good">This box has a max width and the_right_amount_of_padding.</p>

Answer 3

尝试使用其中之一：

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

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

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