После переноса слова выровняйте следующую строку слева, а не по центру

Question

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

.justify {
  text-align: justify;
  text-justify: inter-word;
}

.paragraph {
  text-align: center;
  max-width: 220px;
  word-wrap: break-word;
  word-break: break-all;
}

<div class='justify'>
  <p class="paragraph">Hello, my name is Taylor and welcome to my personal website!</p>
</div>

Answer 1

Вы можете использовать text-align-last

Свойство text-align-last CSS описывает, как выравнивается последняя строка блока или строки непосредственно перед принудительным разрывом строки.

^MDN

.justify {
  text-align: justify;
  text-justify: inter-word;
}

.paragraph {
  text-align: center;
  max-width: 220px;
  word-wrap: break-word;
  word-break: break-all;
  text-align-last: left;
  border: 1px solid red;
}

<div class='justify'>
  <p class="paragraph">Hello, my name is Taylor and welcome to my personal website!</p>
</div>

Answer 2

Вы можете использовать следующее решение для выравнивания следующей строки по левому краю, а не по центру после переноса слова:

.justify {
  text-align: justify;
  text-justify: inter-word;
}

.paragraph {
  text-align: left; //changing text-align to left is an easy solution
  max-width: 220px;
  word-wrap: break-word;
  word-break: break-all;
}