HTML / CSS Responsive Truncation

Question

I recently launched a responsive version of my site, but I found that percentage-width divisions containing several lines of text look very bad, since everything that is on one line, both on the desktop and on mobile views, is each separate the line of text is too long or too short.

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

Answer 1

I can find two options:

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

Calculate text width using JavaScript

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

Make sure you do not display: none it, or the browser does not actually display it, and you cannot determine the width.

Secondly, for CSS to do this for you; it's easier, but you lose almost all the flexibility:

If you want CSS to guess how to cut text to ellipsis, you can try text overflow: ellipsis

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