Clever Geek Handbook

How to keep line breaks but have text alignment: justify?

I have text with line breaks as needed and I don't want to add <br/>

after each line, so I use white-space: pre-wrap

. I want to have text-align:justify

. But they don't seem to work together.

Is there a way to overcome this?

+2


source to share


2 answers


You want 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>
Run codeHide result


+4


source


You can get the text to automatically wrap using the max-width property in css on the element containing 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>
0


source






More articles:


All Articles