Does anyone know why the text in this div adds all that extra white-space on the ends of each line, instead of having the border wrap "tightly" around the text as expected?
https://jsfiddle.net/wvuszL5f/
.myClass { padding:0px; max-width:368px; white-space:normal; border:1px solid black; }
I thought white-space:normal would get this working, but I also tried some of its other values. No luck.
2
Answers
You can add text-align css in your class like below:
As soon as there are (automatic) linebreaks in the text, the element will expand to full width (in this case the defined
max-width
, by default 100% of the parent element). There is no way around this.In a left-aligned text this will cause the described effect, in right-aligned text the white spaces will be at the right, centered will have space on both sides, only
justify
will be different, i.e. distribute the spaces evenly between the words, but still become full-width.