How to justify text in Firefox and Safari with CSS?

Question

In Chrome, on a paragraph element,

text-align: justify;

works fine and creates a block alignment, but has no effect in Firefox or Safari. Any suggestions?

Complexion

This will help you: developer.mozilla.org/en-US/docs/Web/CSS/… – Perjured

IE doesn't know unset. Use with caution. – Thereupon

Answer 1

Set the white-space property to pre-line. It will force to collapse into a single whitespace and the text will wrap on line breaks. This will help to block align:

   white-space: pre-line;

Harbin

Answer 2

Posting in behalf of the OP who posted the answer in comment

I believe I solved the problem:

 white-space: pre-wrap; 

was interfering so I used

white-space: unset; 

to solve the issue.

Harbin

Answer 3

On paragraph element or <p> is block label element but DTD says it's contain inline element. If text-align: justify not working you have to check your browser user agent stylesheet. If p is display: block / inline-block; then text-align: justify; will work.

P{
    display: block; /* inline-block; */
    text-align: justify;
}

It will solve your Firefox and Safari issue.

Wrangle