CSS中类似于Photoshop的“对齐所有”功能的等效方法是什么？

Question

我想将h2元素的文本跨越其div的宽度进行排版。

text-align:justify;

只有当文本的宽度大于其容器的宽度时，才会使文本分散... 类似于 Photoshop 的左对齐

- technopeasant

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

查看这三种解决方案的演示代码。

- NGLN

---

我仍在努力弄清楚为什么这个有效，实际上 :-) - Joey

@Joey 100%宽度的span确保两行文本，导致第一行的对齐。它需要inline以添加到文本中，并且需要block来接受宽度；因此是inline-block。 - NGLN

@所有人请注意，100%适用于父元素的宽度。 - NGLN

啊，这很有道理。确实是这样。不知怎么的，我只想到了 span 会填满剩余空间。我的错。但也许 span 的高度应该再减小一点 :-) - Joey

@Joey 那是一个非常好的观点。不幸的是，那并不起作用。请看编辑。 - NGLN

Answer 2

时间机器回答关于CSS 3 Text Module何时成为推荐标准的问题：

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

不过在那之前，它并没有太大的用处。

- Joey