TsTeaTime TsTeaTime - 3 months ago 15
CSS Question

Justify Paragraph Both Left & Right Side Without Changing Width

How do you justify text so that the following:

The Dog Ran Up The Street And The
Cat Did As Well


appears as such:

The Dog Ran Up The Street
And The Cat Did As Well


Where the text wraps and both left and right sides are aligned. Ideally I would prefer not to use the width styling to complete this. Not sure what to call this issue either!

Answer

You need text-align: justify;.
To make this property work correctly you need to add :after.

The problem is how to align the last line of a text.
Property text-align-last specifies how to align the last line of a text. But it has bad browser support. So we can make a hack. :after adds empty line after the text. So text-align property works correctly on your visible rows. And we shouldn't align the last line of a text (this line is made by :after).

div {
  width: 200px;
}

p {
  text-align: justify;
}

p:after {
  content: "";
  display: inline-block;
  width: 100%;
}
<div>
  <p>
    The Dog Ran Up The Street And The Cat Did As Well
  </p>
</div>