css - 对齐文本但保持最后一行始终居中

Question

是否有办法证明文本合理，但始终使用纯 CSS 保持其最后一个(可能不是单独的行，显示在 div 末尾的文本部分)居中。

例如

                  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

所以，下面的黑客似乎有效，但在我看来，它真的非常丑陋，因为它依赖于你控制行高并使用绝对定位。更糟糕的是，它要求你知道文本中有多少行，这取决于 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 中实现这一点之前，您可能找不到解决问题的优雅解决方案。