相当于 Photoshop 的 Justify-All 的 CSS

Question

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

text-align:justify;

仅当文本的宽度大于其容器的宽度时才展开文本...有点像 Photoshop 的左对齐

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;
}

参见 demo fiddle of all three solutions .