text-align justify like in word

Question

How can I cast paragraphs with text-align: justify; and line breaks in text over the full line width?

HTML default is to align lines with a line-break to left. I like to cast it out over the full line width, like it is in word and other typographic software.

To avoid miss understanding, clarifying typographic soft and hard wraps:

soft wrap: line break
hard wrap: paragraph break / and and start of a new paragraph

Justify casting word

Justify casting web browser

<p style="text-align: justify; font-family: Arial, Lora, Open Sans;">This text has text-align: justify; in the web browser as you can see in this paragraph. Now soft wraps follow.<br>
    This is a test<br>
    to show how text<br>
    is cast in word<br>
    And the text is aligned to left in stead of casting it to 100% width.</p>

Answer 1

I think problem is that your text is not separated by line as it does in MS Word.

Note Keep in mind that you can't justify single line in CSS. To fix that use hack with :after element:

p {
  text-align: justify;
}

p:not(:last-child):after {
  content: "";
  display: inline-block;
  width: 100%;
}

<div>
  <p>
  This is text
  </p>
  <p>
  to show how text
  </p>
  <p>
  is cast in word
  </p>
</div>