CSS:具有惰性宽度的元素

Question

假设我想制作一个 <p>具有固定高度和宽度的元素，只有当高度不足以显示所有文本时，宽度才会增加。默认情况下，<p>是 block 级元素。这意味着它有贪婪的宽度和惰性的高度。我想要相反的惰性动态宽度和固定/贪婪高度。如果可能，行内 block 元素会尝试在一行中显示文本，这不是我想要的。我想要一个纯 CSS 解决方案只是因为。可能吗？

Answer 1

这是不可能的。

9.4.2 Inline formatting contexts

In an inline formatting context, boxes are laid out horizontally [...]. The rectangular area that contains the boxes that form a line is called a line box.

The width of a line box is determined by a containing block and the presence of floats. [...]

In general, the left edge of a line box touches the left edge of its containing block and the right edge touches the right edge of its containing block. However, floating boxes may come between the containing block edge and the line box edge. Thus, although line boxes in the same inline formatting context generally have the same width (that of the containing block), they may vary in width if available horizontal space is reduced due to floats. [...]

Line boxes are created as needed to hold inline-level content within an inline formatting context. [...]

因此，行框的宽度只会受包含 block 的宽度和 float 的存在的影响。然后，将有尽可能多的线框。