Question

无论如何都要证明文本的合理性，但是保留它的最后一行（可能不是单独的行，div的末尾显示的文本部分）总是使用纯CSS来居中。

例如

                  Div Size --<Hello everyone, I would like to>---
                              show and example for the result
                                    that I want to get!

仅使用text-align:center肯定无法解决此问题，因为行的大小（最后一行除外）未得到均衡。但是我在W3School中找到了text-align-last:center的东西，但它也没有解决问题，因为它在chrome中不起作用。

Answer 1

所以，下面的黑客似乎工作，但它真的是非常难看的IMO，因为它依赖于你控制线高和使用绝对定位。更糟糕的是，它需要您知道文本中有多少行，这取决于div的宽度和字体大小，并且可能需要JS来计算。

无论如何，在以上所有免责声明之后，这里是黑客：使用两个具有相同文本的div，一个在另一个之上。一个是合理的，一个是中心的。然后剪下对齐的那个。

HTML

<div id="a">the last line of text in this div should be centered, while all other lines should be justified</div>
<div id="b">the last line of text in this div should be centered, while all other lines should be justified</div>

CSS

div {
    width: 150px;
    line-height: 1em;
    background-color: #FFEEEE;
}

#a {
    text-align: justify;
    height: 3em;
    overflow: hidden;
    position: absolute;
    top: 0px;
}

#b {
    text-align: center;
    position: absolute;
    top: 0px;
    z-index: -1;
}

Fiddle

当然，上面的代码是针对特定宽度的硬编码。同样，您可能需要JS才能计算div中的行数。我非常确定在Webkit中实现这一点之前，您可能无法找到适合您问题的优雅解决方案。

Answer 2

text-align-last属性是为此目的而设计的。最初是微软的一项发明，现在已经在CSS Text Module Level 3 WD中进行了描述，并在Firefox中实现;但是，Firefox仍然需要-moz-前缀。因此，除了text-align: justify之外，您还将使用以下声明：

text-align-last: center;
-moz-text-align-last: center;

除此之外，没有什么希望。预计将在下一版Chrome中提供支持。这不是一个至关重要的问题，你应该尝试一些人为的技术来实现这个简单的功能 - 你需要在相当低的水平上拦截浏览器中的块格式。

Answer 3

这将达到预期的效果：

<div>the last line of text in this div should be centered, while all other lines <p style="text-align:center; margin: 0;">should be justified</p></div>

对文本进行对齐但保持其最后一行始终居中

3 个答案: