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

Question

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

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

有时候我会创建容器overflow:hidden，但这只会阻止URL的末尾，并且它会导致锁定故障。另一种方法可能是缩小较小设备上的字体大小，但在URL长度不同的情况下，这意味着将其缩小以确保它总是有足够的空间。

必须有更好的方法。

Answer 1

如果隐藏或滚动溢出都不适合您，请强行考虑word wrapping in 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只有在我将max-width添加到锚标记后才能完成。具体到我的设计：

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