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。

spec表示可以覆盖text-align-last，但仅当text-align为start end时才会被覆盖。这似乎不适用于text-align的任何其他值。

对于具有零，一或n个格式化行的元素，没有选择器，::last-line也没有::first-line对应的选择器。所以看起来你运气不好用纯CSS。您将不得不使用脚本来识别只有一行的section元素（即文本不包装的section元素），将类名附加到这些元素，并将text-align-last: center（或auto）应用于他们。

Answer 3

使用选择器text-align-last在所需元素上覆盖::first-line即可完成工作。

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>

Answer 4

我发现使用宽度max-content, max-width:100%，并将元素居中以很好地工作。如果小于一行，则元素将缩小到该行的大小，并以margin: 0 auto;为中心。如果它延伸超过一行，它将拉伸该元素到它碰到{{1 }}规则，然后继续下一行。现在，该块已达到最大宽度，其中的文本将遵循max-width:100%规则。

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

Answer 5

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

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

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

5 个答案: