CODEWITHSUNDEEP
htmlcss
Chris
Chris

Reputation: 1400

How do I limit the length of an link?

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?

Upvotes: 1

Views: 2136

Answers (3)

cesarsalazar
cesarsalazar

Reputation: 708

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 ;
}

Upvotes: 0

Yoko Zunna
Yoko Zunna

Reputation: 1824

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

Upvotes: -1

alex
alex

Reputation: 490233

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.

Upvotes: 3

Related Questions