George Birbilis George Birbilis - 1 month ago 13
HTML Question

CSS word-wrap: break-word not wrapping a tag unless you wrap it in div and add rule there

why does CSS rule

a {
word-wrap: break-word;
}


with

<div>
<a href="...">verylongurlherewithnospaces</a>
</div>


not wrapping and causing window to show scrollbar, whereas

div {
word-wrap: break-word;
}


will do the wrapping at its anchor child's text fine?

UPDATE:
just noticed (see L3ST-instance URL field at this form when you resize the window) that I needed word-break:break-all instead of word-wrap:break-word, apart from the suggested display:inline-block, so now using:

a
{
word-break: break-all !important; /* make sure containers don't override */
display: inline-block !important;
}


which works fine

Answer

The CSS word-wrap: break-word; works only in display:block; or display:inline-block; elements so you can just use:

a {
  display:inline-block;
  word-wrap: break-word;
}

a {
  width:100px;
  word-wrap: break-word;
  display:inline-block;
}
<div>
  <a href="...">verylongurlherewithnospaces</a>
</div>

P.S. div are display:block; as default by user-agent.