Выравнивание перенесенной части строки

Question

Требуется стиль, при котором перенесенная часть строки выравнивается справа. Как можно такое реализовать? пример:

Пример строки в котором перенесенный текст
выравнивается справа

Answer 1

Ну могу предложить самый простой вариант. Использовать float:right на строке которую хотим выровнить по правому краю

.text {
  width: 60%;
}
span {
  float:right;
}

<div class = "text">
какой то текст... длинный на одной строке<br>
продолжение длинного текста на другой строке<br>
<span>текст справа</span>
</div>

Answer 2

У нас есть текст (вы указали в комментарии), который разделен тегами <br>, то что не поместилось в общую ширину мы выравниваем по правую сторону, при условии, что перенос только один раз, мы можем выравнять по правому краю последний text-align-last: right;

тообразом мы получаем текст выравненый по левому краю, а что не поместилось справа. js я добавила, чтоб обернуть в тег <p> общий текст/"строки", который просто разделен <br>

Желтым отметила ширину нашего контейнера, чтоб визуально было видно, то, что не поместилось в ширину

document.addEventListener("DOMContentLoaded", function() {
  // Находим контейнер с текстом
  const container = document.querySelector('.text-container');
  // Получаем содержимое контейнера
  const content = container.innerHTML;

  // Разбиваем содержимое на массив строк, используя <br> в качестве разделителя
  const lines = content.split('<br>');

  // Оборачиваем каждую строку в <p> и добавляем обратно <br> после каждой строки
  const wrappedLines = lines.map(line => {
    return `<p>${line}<br></p>`;
  });

  // Присваиваем контейнеру новое содержимое
  container.innerHTML = wrappedLines.join('');
});

.right-align-wrap {
  width: 300px;
  font-family: Arial, sans-serif;
  text-align: left;
  line-height: 1.5;
  background-color: yellow;
}

.right-align-wrap p {
  margin: 0;
  text-align: left;
  text-align-last: right;
  word-break: break-word;
  display: inline-block;
}

<div class="right-align-wrap text-container">
  Пример строки в котором перенесенный справа<br> И дальше другой текст<br> Пример строки слева, а что то справа, что не поместилось<br>
</div>

В этом примере предложу text-align: justify; - что заполнит всю ширину контейнера, распределяя пробелы между словами, а text-align-last: right; выравняет последнюю строку по правому краю

.right-align-wrap {
  width: 300px;
  /* Установите нужную ширину */
  text-align: justify;
  text-align-last: right;
  font-family: Arial, sans-serif;
}

<div class="right-align-wrap">
  Пример строки в котором перенесенный текст выравнивается справа
</div>

предыдущий вариант, неестественно дает большие пробелы визуально, поэтому можно попробовать с direction: rtl; сделать следующим образом

.right-align-wrap {
  width: 300px;
  /* Установите нужную ширину */
  text-align: left;
  direction: rtl;
  font-family: Arial, sans-serif;
}

.right-align-wrap span {
  display: block;
  direction: ltr;
  text-align: right;
}

<div class="right-align-wrap">
  <span>Пример строки в котором перенесенный текст выравнивается справа</span>
</div>

Answer 3

Если строк только две, то используй text-align-last:

p {
  max-width: 50ch;
  outline: 1px solid red;
  margin: auto;
  
  text-align: left;
  text-align-last: right;
}

<p>Пример строки в котором перенесенный текст выравнивается справа</p>

Вот пример со стихами (не работает в FF - ему нужно оборачивать в span'ы):

body {
  width: 30ch;
  margin: auto;
}

p {
  outline: 1px solid red;
  display: grid;
  grid-auto-rows: auto 0;
  justify-items: start;
  text-align-last: right;
}

p br {
  content: "";
}

<p>Сижу за решеткой в темнице сырой.<br>
Вскормленный в неволе орел молодой,<br>
Мой грустный товарищ, махая крылом,<br>
Кровавую пищу клюет под окном,</p>

<p>Клюет, и бросает, и смотрит в окно,<br>
Как будто со мною задумал одно.<br>
Зовет меня взглядом и криком своим<br>
И вымолвить хочет: «Давай улетим!</p>

<p>Мы вольные птицы; пора, брат, пора!<br>
Туда, где за тучей белеет гора,<br>
Туда, где синеют морские края,<br>
Туда, где гуляем лишь ветер... да я!...»</p>

<em>А. С. Пушкин</em>

БЛОГ НА HUSL

Выравнивание перенесенной части строки

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