CODEWITHSUNDEEP
htmlcss
ispiro
ispiro

Reputation: 27693

How to preserve line breaks but have text-align:justify?

I have text which has line breaks as needed and I don't want to have to add a <br/> after each line so I use white-space: pre-wrap. I want to have text-align:justify as well. But they don't seem to work together.

Is there a way to overcome that?

Upvotes: 2

Views: 2413

Answers (2)

steve
steve

Reputation: 153

You can get text to auto-wrap by using the max-width property in css on the element that contains the text (or any parent element)

p{
 max-width:300px;
 text-align:justify;
}

<p>dfhdbh dgg dd ew asdf dhfdhfh d hdhfbk djdbjbk dhdbhfbd jkbfjbdjk hdjkhjkdh dhfjkdhkfjgdfkdj df djfhkdjfh hdfbdh dfdhf fdhgdgds sdh dfhdbvdhg shdgh dfhf dfhdff fhddh fhfgdssdsew dfhgseey dhd ff fhde fheybd dfhey sd wyo gfj fggn cjvnf jcnjf fjncj fju djfu dcjndf  </p>

Upvotes: 0

Mr Lister
Mr Lister

Reputation: 46579

What you want is white-space:pre-line, not pre-wrap.

And you also need text-align-last, because text-align by itself won't cut it.

div {
  white-space: pre-line;
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
}
<div>one two three four
five six seven etc etc etc</div>

Upvotes: 6

Related Questions