CSS单词包装:除非您将单词包装在div中并在其中添加规则，否则不要包装标签

Question

为什么CSS规则是

a {
  word-wrap: break-word;
}

带有

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

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

div {
  word-wrap: break-word;
}

在其锚点处换行子文本可以吗？

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

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>

p.S.div是用户代理默认的display:block;。