html - 长 URL（超过设备宽度）的响应式解决方案

Question

正如标题所暗示的那样，在构建响应式网站时，我经常遇到一个问题，即长（ish）URL 会破坏我的流动网格并导致在较小的设备上水平滚动。因为它们是一根长绳，所以它们不会包裹并将容器的宽度推到比设备宽度更宽的位置......

 <--device-->
______________
|             |
| http://longurlthatdoesntfit.com
|             |
|             |

有时我会制作容器overflow:hidden，但这只是切断了 URL 的结尾，而且它往往会锁定故障。另一种方法可能是在较小的设备上缩小字体大小，但在 URL 长度不同的情况下，这意味着将其缩小以确保它始终有足够的空间。

一定会有更好的办法。

Answer 1

如果隐藏或滚动溢出都不适合您，请考虑在 CSS 中强制换行：

word-wrap: break-word;

Answer 2

尝试添加自动换行：break-word; 到您的网格样式。

<div style="word-wrap: break-word;">
  <a href="#">http://www.extraverylongurlthatdoesntfit.com</a>
</div>

Answer 3

对我来说，word-wrap: break-word只有在我将 a 添加max-width到锚标记后，解决方案才成功。具体到我的设计：

a {word-wrap: break-word; max-width:300px;}