Question

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

溢出：隐藏，也不是一个选项，只是忽略了包含url的td的样式。

Answer 1

CSS3有一个新功能：

word-wrap:break-word;

您可以看到实时示例here（您必须拥有与该新功能兼容的浏览器）。

它也与StackOverflow采用的tecnique相同，如果你检查你会注意到你的长URL。

或者，您可以尝试Hyphenator。

Answer 2

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

在Chrome中，word-wrap不起作用。您应该使用：

word-break: break-all;

如果只想将其应用于标签，则应使用：

a {word-break: break-all;}

请注意，break-all甚至会拆分单词，因此单词可以在一行上开始并在另一行上结束，这就是为什么只在a标签上应用它是一个好主意的原因。如果您知道自己的链接始终包含单词（例如，不是类似于mylink / abcdefghijklmnopqrstuvwxyz1234567890abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz1234567890abcdefghijklmnopqrstuvwxyz1234567890这样的单词，则不会在您的行上贴上您的代码，然后在该行上贴上这样的标签）：

body {word-break: break-word;}

Answer 4

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

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

Answer 5

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

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

打破巨大的URL，使它们不会溢出

5 个答案: