css - CSS 相当于 Photoshop 的 Justify-All

Question

我想采用一个 h2 元素并将它的文本跨越它的 div 的宽度。

text-align:justify;

仅当文本的宽度大于其容器的宽度时才传播文本...有点像 Photoshop 的 justify-left

Answer 1

CSS：

h2 {text-align: justify;}
h2 span {width: 100%; display: inline-block;}

HTML：

<h2>This is a h2 heading<span></span></h2>

请注意，这会增加一条不可见的额外线，从而导致高度过高。您可能需要对此进行补偿：

h2 {text-align: justify; height: 1.15em;}

对于一个非常简洁的标记，仅适用于 IE7 或更低版本的浏览器，您可以使用::after选择器：

h2::after {
    width: 100%;
    display: inline-block;
    content: ".";
    visibility: hidden;
}

请参阅所有三种解决方案的演示小提琴。

Answer 2

当CSS 3 文本模块成为推荐时，时间机器的答案：

text-align: justify;
text-align-last: justify;

不过在那之前用处不大。