Как я могу использовать 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-last когда контейнерный блок имеет только одну отформатированную строку и text-align является center,

В спецификации сказано, что text-align-last может быть отменено, но только когда text-align является start end, Это не относится ни к одному из других значений для text-align,

Не существует селекторов для элементов с нулевой, одной или n форматированными строками, а также нет ::last-line аналог ::first-line, Так что, кажется, вам не повезло делать это с чистым CSS. Вам нужно будет использовать сценарий для определения section элементы только с одной строкой (т.е. section элементы, текст которых не переносится), прикрепите имя класса к этим элементам и примените text-align-last: center (или же auto) им.

Answer 2

Наконец-то я придумал другое решение. Я установлю все элементы 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 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; Если он выходит за пределы одной линии, он растягивает элемент до точки, где он попадает в 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;
}

<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

Селектор первой строки text-align: center;

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