Question 161275 in Html Question posted in
Some basic documentation can be found here.

Why isn’t HTML-CSS wrapping correctly instead of adding extra spaces?

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.

Tags:

2

Answers


  1. 0

    You can add text-align css in your class like below:

    .myClass { padding:0px; max-width:368px; white-space:normal; border:1px solid black; text-align: justify;}
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search