CSS相当于Photoshop的Justify-All [英] CSS equivalent to Photoshop's Justify-All

问题描述

我想要一个h2元素，跨越它的div的宽度跨越它的文本。

I'd like to take an h2 element and span it's text across the width of it's div.

text-align:justify;

仅在文本宽度大于其容器宽度时才传播文本... Photoshop's justify-left

only spreads the text if it's width is greater than the width of it's container... kind of like Photoshop's justify-left

推荐答案

CSS：

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

HTML：

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

请注意，这会添加一个不可见的额外行，导致高度过高。您可能想要补偿：

Note that this adds a unvisible extra line, resulting in too much height. You might want to compensate for that:

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

对于一个非常整齐的标记，只适用于IE7以外的浏览器您可以使用 :: after 选择器：

And for a very neat markup, only working for browsers other then IE7 or below, you could use the ::after selector:

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

查看所有三种解决方案的演示小提琴。

这篇关于CSS相当于Photoshop的Justify-All的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！