html - CSS 自动换行 : break-word not wrapping a tag unless you wrap it in div and add rule there

Question

为什么CSS规则

a {
  word-wrap: break-word;
}

与

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

不换行并导致窗口显示滚动条，而

div {
  word-wrap: break-word;
}

在它的 anchor child 的文本处换行会好吗？

更新:刚刚注意到(当您调整窗口大小时，请参阅此 form 中的 L3ST 实例 URL 字段)我需要 word-break:break-all 而不是 word-wrap:break-word，除了建议的 display:inline-block，所以现在使用:

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

效果不错

Answer 1

CSS word-wrap: break-word; 仅适用于 display:block; 或 display:inline-block; 元素，因此你可以只使用:

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

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

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

附言div 是用户代理默认的 display:block;。