如何限制链接的长度？

I have links that I want limit the length. They are inside of an unordered list and they wrap. I want to limit the length of the url instead of having it wrap. Because it is wrapping I can't use overflow:hidden.

我有链接，我想限制长度。它们位于无序列表中并且它们包裹起来。我想限制网址的长度，而不是让它包裹。因为它是包装我不能使用overflow：hidden。

Is there a way to limit them the href with css?

有没有办法用css限制它们的href？

3 个解决方案

#1

ul li {
  white-space: nowrap;
}

jsFiddle.

的jsfiddle。

You can then use overflow: hidden on the container.

然后，您可以在容器上使用overflow：hidden。

Altenatively, you can use JavaScript to truncate the strings, and perhaps append an ellipsis.

另外，您可以使用JavaScript来截断字符串，也可以附加省略号。

#2

Perhaps the CSS property overflow: hidden; can help you, in conjuntion with width.

也许CSS属性溢出：隐藏;可以帮助你，与宽度相结合。

#3

I know you requested a CSS way to do this, but just in case JavaScript is an option you could do something like this:

我知道你要求一种CSS方法来做到这一点，但为了防止JavaScript是一个选项，你可以这样做：

truncate("http://www.thisisaverlylongurl.com/and-i-want/to-truncate-it", 25);

var truncate = function(text, max_chars){    
  return (text.length > max_chars) ? text.substring(0, max_chars) + '...' : text ;
}

#1

ul li {
  white-space: nowrap;
}