我怎么能使用text-align-last,除非我只有一行文字？

Question

我想将文本与中心对齐,但最后一行在左边:

section {
    text-align: center;
    text-align-last: left;
}

它运作良好,但如果只有一条线怎么办？在这种情况下,我想将文本与中心对齐,这不起作用,因为第一行也是最后一行.对于只有多行文本或第一行选择器(非伪元素:first-line)的元素,是否有任何选择器？

实例:

section {
  text-align: center;
  text-align-last: left;
  width: 300px;
}

<strong>This works:</strong>
<section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam turpis consectetur diam fringilla, vel ultrices sapien bibendum. Maecenas pulvinar in nisl at mattis. Duis nisi risus, rhoncus sit amet ornare malesuada.</section>

<strong>Next line should be centered (something like text-align-first?):</strong>
<section>Lorem ipsum dolor sit amet.</section>

Answer 1

最后，我发明了另一种解决方案。我将设置所有元素，display: inline-block;然后使用将它们放入容器中text-align: center;。如果有多行，则什么都不会改变。但是，如果只有一条线，.child将具有较小的宽度并居中。

.container {
  text-align: center;
  width: 300px;
}

.child {
  display: inline-block;
  text-align: center;
  text-align-last: left;
  width: auto;
}

<section class="container">
    <strong>This works:</strong>
    <section class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam turpis consectetur diam fringilla, vel ultrices sapien bibendum. Maecenas pulvinar in nisl at mattis. Duis nisi risus, rhoncus sit amet ornare malesuada.</section>
    <strong>Next line should be centered</strong>
    <section class="child">Lorem ipsum dolor sit amet.</section>
</section>

Answer 2

text-align-last当块容器只有一个格式化行且text-align为时，似乎没有一种方法可以覆盖center。

规范说可以被text-align-last覆盖，但只有当text-align是时start end。这似乎不适用于 的任何其他值text-align。

对于具有 0、1 或 n 格式化行的元素，没有选择器，也没有与::last-line相对应的选择器::first-line。所以看来你用纯 CSS 来做这件事不太走运。您将必须使用脚本来识别section只有一行的元素（即section文本不换行的元素），将类名附加到这些元素，然后对它们应用text-align-last: center（或auto）。