CSS相当于Photoshop的Justify-All

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

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

Answer 2

时间机器回答何时CSS 3 文本模块成为推荐：

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

不过在那之前它不会有太大用处。