Пустое пространство при переносе строки

Question

На данном скриншоте видно как переносится текст, но меня не устраивает пустое синее пространство возле самого переноса. возможно сделать так, чтобы оно прижималось к тексту?

.wrapper{
  background-color: rgb(0, 0, 0);
  max-width: 1200px;
  border-radius: 15px;
}
.text{
  color: white;
  margin: 10px;
  overflow-wrap: break-word;
  word-break: break-word;
}

<div className='wrapper'>
  <p className='text'>
      пример переносимого текста
  </p>
</div>

Answer 1

text-align: justify,
text-justify: inter-character:

<div style="width: 20em;">
  <p style="text-align: justify; text-justify: inter-character;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p>
  <p style="text-align: justify;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p>
</div>

Answer 2

Можно к text-align: justify добавить word-break: break-all и тогда будет перенос побуквенно. Но грамматически это не правильно думаю).

p {
  width: 300px;
  word-break: break-all;
  text-align: justify;
}

<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя</p>

БЛОГ НА HUSL

Пустое пространство при переносе строки

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