CSS word-wrap：break-word不会包装标签，除非你将它包装在div中并在那里添加规则

Question

为什么CSS统治

a {
  word-wrap: break-word;
}

和

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

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

div {
  word-wrap: break-word;
}

其锚点子文本的换行效果好吗​​？

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

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

效果很好

Answer 1

CSSword-wrap: break-word;仅适用于display:block;或display:inline-block;元素，因此您可以使用：

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

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

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

PSdiv是display:block;用户代理默认的。