css – 除非我只有一行文字,否则如何使用text-align-last?

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

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

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

实例:

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>
当块容器只有一个格式化的行并且text-align为center时,似乎没有办法覆盖text-align-last.

spec表示text-align-last可以被覆盖,但只有当text-align是start end时才会被覆盖.这似乎不适用于text-align的任何其他值.

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

相关文章
相关标签/搜索