Text alignment is aligned as in a word
How can I draw paragraphs with text-align: justify;
and line breaks in text across the entire line width?
HTML defaults to left alignment of lines with line breaks. I like to highlight it across the full line width, for example in word and other typography software.
For the avoidance of misunderstanding, clarifying typographic soft and hard wraps:
soft wrap: line break
hard wrap: paragraph break / and and start of a new paragraph
Change the word caste
Submit your web browser casting
<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>
source to share
I think the problem is that your text is not separated by a line like in MS Word.
Note Keep in mind that you cannot justify a single line in CSS. To fix this, use a hack with the element :after
:
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>
source to share