除非我只有一行文本，否则如何使用 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

第一行选择器text-align: center;

section:nth(1){
   text-align: center;
}

Answer 2

当块容器只有一个格式化行并且 text-align 是 center 时，似乎没有办法覆盖 text-align-last。

spec 说 text-align-last 可以被覆盖，但只有当 text-align 是 start end 时。这似乎不适用于 text-align.

的任何其他值

没有用于具有零、一或 n 格式化行的元素的选择器，也没有与 ::first-line 对应的 ::last-line。所以看起来你用纯 CSS 做这件事并不走运。您将不得不使用脚本来识别只有一行的 section 元素（即文本未换行的 section 元素），为这些元素附加一个 class 名称，并对它们应用 text-align-last: center（或 auto）。

Answer 3

最后，我发明了另一种解决方案。我将设置所有元素 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 4

我发现使用宽度：max-content, max-width:100% 和居中元素效果很好。如果它小于一行，元素将缩小到该行的大小，并以 margin: 0 auto; 为中心如果它延伸超过一行，它将拉伸元素到它碰到 [=14] 的点=] 规则，然后继续下一行。现在块处于最大宽度，里面的文本将遵循 text-align 规则。

.justify_unless_one_line{
    text-align: justify;
    margin: 0 auto;
    width: max-content;
    max-width: 100%;
}

.container{
  padding: 10px;
  width: 300px;
  border: 1px solid black;
  margin: 0 auto;
}

<section>
 <div class='container'>
 <h2>Single Line</h2>
  <p class="justify_unless_one_line">
      This is an example of one line
  </p>
  <h2>Many Lines</h2>
  <p class="justify_unless_one_line">
      This is an example of many lines. This is an example of many lines. This is an example of many lines. This is an example of many lines. This is an example of many lines. This is an example of many lines.
  </p>
  </div>
</section>

Answer 5

用选择器 ::first-line 覆盖所需元素上的 text-align-last 即可。

section {
  text-align: center;
  text-align-last: left;
  width: 300px;
}
section::first-line {
  text-align-last: center;
  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>

除非我只有一行文本，否则如何使用 text-align-last？

How can I use text-align-last except when I have only one line of text?

css

text-align