如何限制链接的长度？

Question

我有链接，我想限制长度。它们位于一个无序列表中，并且它们被包装起来。我想限制url的长度，而不是让它换行。因为它是包装，所以我不能使用overflow:hidden。

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

Answer 1

ul li {
  white-space: nowrap;
}

jsFiddle。

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

或者，您可以使用JavaScript截断字符串，或许还可以附加一个省略号。

Answer 2

我知道你要求一个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 ;
}

Answer 3

结合width，CSS属性overflow: hidden;可能会对您有所帮助。