html – how to create manual line breaks in a justify text-ThrowExceptions

Exception or error:

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?

How to solve:

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

###

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;

Leave a Reply

Your email address will not be published. Required fields are marked *