0

I have the align-text: justify; property applied to some text. The problem is when I want to move a word to a new line, the text is not justified. How can I fix this problem?

image

<div style="width: 400px; height: 200px;">
<p style="text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit <br>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
JW Geertsma
  • 857
  • 3
  • 13
  • 19
virelox
  • 11
  • 1
  • 3

1 Answers1

0

You could try to add white-space: pre-line; and text-align-last: justify; to your code.

<div style="width: 400px; height: 200px;">
<p style="text-align: justify; white-space: pre-line; text-align-last: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit <br>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
JW Geertsma
  • 857
  • 3
  • 13
  • 19
  • I don't want the text at the bottom to have such long breaks, any other suggestions? – virelox Aug 13 '21 at 11:23
  • 1
    Why would anyobody ever do that? You have no control about how many words there are in that last row, and the space between these words will be adjusted to a literally unreadable amount. I think having the last line not forced into justified align is the much better solution ... – Floyd Aug 13 '21 at 11:26
  • @virelox That's the way it is ... what is your browser supposed to do? You tell him, you want that last line justified, and the only way he can do that is by adding space between the words ... – Floyd Aug 13 '21 at 11:27
  • @Floyd All in all right, but I thought there was a CSS solution for that – virelox Aug 13 '21 at 11:31
  • You still did not get it right. This is a fundamental problem - there is nothing CSS can do about it. If you have to words left for the last line, there is no way to make this look good. Try it yourself by cutting out two pieces of paper (your words) and aligning them ... ;) – Floyd Aug 13 '21 at 11:35
  • The only problem now is that when I try to turn off the align on the last line it gets double br, i try display: inline, but justify not working – virelox Aug 13 '21 at 12:10