CSS word-wrap: break-word not wrapping a tag unles

问题:

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

回答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>

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