how to create manual line breaks in a justify text

Question

I have a Word document with story, about 5 pages long. The task is to implement this story on a website.

#reading {
  hyphens: auto;
  text-align: justify
}

<div style="font-size: 20px; width: 750px; margin-bottom: 4em;" class="reading" id="reading">
  TextTextText<br> TextTextText
  <br> TextTextText
</div>

Conditions for the text:

it should have the exact same line breaks like in the word document
justify all lines
I cannot use span elements because of a script which runs over the text

Problem:

line break and text-align: justify do not work together.

I tried also putting the div width on the same level as in the Word document. The line breaks are ok for the first 20 lines, before they start to move slightly.

Question:

Is there a way to create manual line breaks and still keep text-align justify?

You need [`text-align-last`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last). See for example [Justify the last line of a div?](https://stackoverflow.com/q/4771304/1016716) — Mr Lister, Jan 14 '20 at 08:20
The problem is not the last line, if I understand you correctly. But that a line break in every single line, would make the text align: left again. So justify would be completly ignored — InPanic, Jan 14 '20 at 08:43
And that's why you need text-align-last! Every line that ends with a
is the last line before the
. See the linked question, or, just test it by adding `text-align-last:justify;` to your css. — Mr Lister, Jan 14 '20 at 09:46
Or, heck, see this fiddle: https://jsfiddle.net/MrLister/eouhdsxa/2/ — Mr Lister, Jan 14 '20 at 09:46
Thanks, now I understand your point. I will give it a shot tomorrow — InPanic, Jan 14 '20 at 15:50

AlainPre · Answer 1 · 2020-01-14T10:41:10.367

0

You can use CSS property text-align-last: justify

Please note: if there are only a few words on the last line, the result may be disappointing : a word on the left and a word on the right with a large space between.

align-text-last: center can give a more aesthetic result.

A simulator for Text-align-last property

edited Jan 14 '20 at 10:41

answered Jan 14 '20 at 09:50

AlainPre

441
3
4

HoRn · Answer 2 · 2020-02-25T17:24:12.357

If you can't use <br> because of text-align: justify then I'm afraid you have to add additional elements: https://stackoverflow.com/a/2703610/1453413 .

You can't use <span> elements but you may use paragraphs <p>.

I would wrap the text into multiple paragraphs <p> and use margin css property:

.par-just {
    text-align: justify;
    margin: 0;
    text-indent: 30px;
}

<div style="font-size: 20px; width: 750px; margin-bottom: 4em;" class="reading" id="reading">
    <p class="par-just">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    </p>

    <p class="par-just">
        Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
    </p>
</div>

However in case margin: 0 there is no margin between paragraphs. If you still need a small margin, using a negative value would help: margin-bottom: -10px;

how to create manual line breaks in a justify text

2 Answers2