4

I recently launched a responsive version of my site, however I'm finding that percentage width divisions containing a number of single lines of text look really bad, as fitting everything on a single line in both the desktop and mobile views results in each single line of text being either too long or too short.

My markup is a single unordered list of links (with long anchor texts) - does anyone have any suggestions to truncate the anchor text according to the width of the containing division?

0

1 Answer 1

1

I can come up with two options:

One is to do it yourself using javascript as described here:

Calculate text width with JavaScript

I don't think there is any way to determine the width of the text until the browser actually renders the text.

Make sure you don't display: none it, or the browser won't actually render it and you can't determine the width.

The second is to let CSS do it for you; it's easier, but you lose pretty much all flexibility:

If you're willing to let CSS guess at how to cut off your text into ellipsis, you can try text-overflow: ellipsis

http://www.quirksmode.org/css/textoverflow.html

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.