1

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.

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

Chris
  • 1,400
  • 9
  • 20
  • 35
  • Related question: http://stackoverflow.com/questions/802175/truncating-long-strings-with-css-feasible-yet – Adam Feb 22 '11 at 08:59

3 Answers3

3
ul li {
  white-space: nowrap;
}

jsFiddle.

You can then use overflow: hidden on the container.

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

alex
  • 479,566
  • 201
  • 878
  • 984
0

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

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 ;
}
cesarsalazar
  • 698
  • 6
  • 13
-1

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

Yoko Zunna
  • 1,804
  • 14
  • 21