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

Question

为什么 CSS 规则

a {
  word-wrap: break-word;
}

和

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

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

div {
  word-wrap: break-word;
}

在其锚点子文本处进行换行会好吗？

更新： 刚注意到（当你调整 window 的大小时，请参阅此 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>

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

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