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

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>

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