Как я могу выровнять текст, который не умещается в первой строке, по правому краю в CSS, как это делают в поэзии?

Question

Я добавляю стихи на свой сайт. Проблема в том, что при уменьшении размера экрана строки стихотворения рвутся.
Я хочу показать часть строки, которая идет после разрыва строки, как в сборниках стихов, когда длина строки стиха не соответствует ширине страницы.

Вот пример:

The quick brown fox jumps over the
                           lazy dog

Первая строка выровнена по левому краю, вторая - по правому. (Конечно, это будет происходить только на маленьких экранах.)

Есть ли способ сделать это повторяемым? Это не разовое мероприятие; Я пытаюсь создать стандарт с классами.

_{Свободный перевод вопроса How can I align the text that didn't fit the first line to right in CSS, like they do in poetry? от участника @bedirhangn.}

Answer 1

Используйте text-align-last

Поддержка браузерами

.box {
  width: 350px;
  border: 1px solid #000;
  resize:horizontal;
  overflow:auto;
}
.box * {
  /*text-align:justify; раскомментируйте это, чтобы увидеть эффект `justify`, тоже неплохо */
  text-align-last: right;
  display:inline-block;
}

<div class="box">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div><br>
  <div>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>
</div>

_{Свободный перевод ответа от участника @Temani Afif.}

Answer 2

Существует псевдоэлемент CSS для выбора первой строки текста, который вы можете использовать здесь:

::first-line

Update: несмотря на то, что селектор поддерживается во всех основных браузерах, похоже, что некоторые браузеры не позволяют применять выравнивание текста с этим селектором. Так что, это ненадежное кроссбраузерное решение (пока?), Я оставлю его здесь на случай, если оно кому-то пригодится или станет действительным в будущем.

#wrapper {
  display: block;
  width: 350px;
  height: auto;
  border: 1px solid #000;
}
#wrapper span {
  display: block;
  text-align: right;
}
#wrapper span::first-line {
  text-align: left;
}

<div id="wrapper">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
  <span>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</span>
  <span>Duis aute irure dolor in reprehenderit in voluptate velit esse.</span>
</div>

_{Свободный перевод ответа от участника @DBS.}

БЛОГ НА HUSL

Как я могу выровнять текст, который не умещается в первой строке, по правому краю в CSS, как это делают в поэзии?

Ответы (2 шт):