CSS word-break：break-all不使用链接

Question

我的网站存在问题。除a链接标记外，所有内容都正确适应屏幕大小。它保持很长时间并超出了屏幕尺寸，我试过这个：

a
{
    word-break: break-all;
}

但链接，而不是显示如下：

http://somesite
thatoverflowcontent
.com

...继续这样显示并扩展内容的大小，溢出屏幕：

http://somesitethatoverflowcontent.com

为什么word-break: break-all在这种情况下不起作用？

Answer 1

在display: inline-block元素上添加了a规则并且效果很好。

Answer 2

问题是<a>标记默认为display: inline，您无法为内联元素设置width。

<强> According to MDN ，

  

word-break将在文本否则会溢出其容器的确切位置创建一个中断

考虑到您无法将宽度应用于inline元素，除非您更改display（除了设置width），否则文本永远不会溢出容器：< / p>

a, p {
  word-break: break-all;
  width: 10%;
}

a {
  display: block;
}

<a href="http://somesitethatoverflowcontent.com">http://somesitethatoverflowcontent.com</a>
<p>http://somesitethatoverflowcontent.com</p>

希望这有帮助！ ：）

Answer 3

或者：a { overflow-wrap: break-word; }。