CSS换行：断行词不包装标签，除非您将其包装在div中并在其中添加规则

Question

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 1

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> 

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