Josh_Evoknow Josh_Evoknow - 5 months ago 7
HTML Question

'word wrapping' on li rather than individual words

I am generating a list of tags (in an

ul
/
li
format) that I would like to have the line break occur on the
li
and not on the individual words or characters within the
li
.

The only css command that I have found to do anything so far was
word-break
where if it is
break-all
it will break after any character,
normal
(or anything else which will default to
normal
) has it breaking after a space or a dash
-


Fiddle

My css is as follows currently:

li {
display: inline;
line-height: 24px !important;
border: 1px solid black;
word-break: normal;
}

Answer

If I understood correctly, you just need to set li as display:inline-block

li {
  display: inline-block;
  line-height: 24px;
  border: 1px solid black;
}
<ul>
  <li>This longword tag One</li>
  <li>This longword tag Two</li>
  <li>ThislongwordtagThree</li>
  <li>This longword tag Four</li>
  <li>This longword tag Five</li>
  <li>This longword tag Six</li>
  <li>This longword tag Seven</li>
</ul>
<ul>
  <li>This longword tag One</li>
  <li>This longword tag Two</li>
  <li>ThislongwordtagThree</li>
  <li>This longword tag Four</li>
  <li>This longword tag Five</li>
  <li>This longword tag Six</li>
  <li>This longword tag Seven</li>
</ul>