打破巨大的网址，这样它们就不会溢出

Question

有没有办法强制使用巨大的网址，例如http://www.google.de/search?q=65daysofstatic&hl=de&safe=off&prmd=ivnsl&source=lnms&tbm=isch&e i=P9NkToCRMorHsgaunaClCg&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CBkQ_AUoAQ&biw=1697&bih=882在网站中呈现时中断？我宁愿缩短它，但在我工作的地方，他们要求我显示整个网址，但我只有 320px 的空间来显示它，它就溢出了。

Overflow:hidden 也不是一个选项，并且向包含 url 的 td 添加样式将被简单地忽略。

Answer 1

在 Chrome 中，自动换行不起作用。您应该使用：

word-break: break-all;

如果您只想将其应用于标签，那么您应该使用：

a {word-break: break-all;}

请注意 break-all 甚至会分割单词，因此一个单词可以在一行上开始并在另一行上结束，这就是为什么最好只将其应用于 a 标记。如果您知道您的链接始终包含单词（例如不是类似 mylink/abcdefghijklmnopqrstuvwxyz1234567890abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz1234567890abcdefghijklmnopqrstuvwxyz1234567890 ），然后您可以在正文标记级别应用以下内容（这样一个单词就不会分成两行）：

body {word-break: break-word;}

Answer 2

CSS3 有一个新功能：

word-wrap:break-word;

您可以在此处查看一个实例（您必须拥有与其兼容的浏览器）新功能）。

这也与 StackOverflow 采用的技术相同，如果您检查长 URL，您会发现。

或者，您也可以尝试Hyphenator。

Answer 3

-ms-word-break: break-all;
     word-break: break-all;

     // Non standard for webkit
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

以上适用于 Internet Explorer 8+、Firefox 6+、iOS 4.2、Safari 5.1+ 和 Chrome 13+。

Answer 4

溢出包装来救援：

注意：与 word-break 相比，overflow-wrap 只会创建一个
如果整个单词不能单独占一行，则中断
溢出来了。

它具有几乎完整的浏览器支持，当您的长单词（EG URL）无法容纳可用空间时，它将提供帮助

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

Answer 5

我使用此规则仅影响锚点。

.my-paragraph p a[href] {
  word-wrap:break-word;
}

Answer 6

尝试下面的 CSS 属性 将长文本 URL 显示为短文本...

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
max-width: 40%;