长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>