CSS text-overflow prepend ellipses

Question

I have a ul>li structure with a list of file paths. It's in a container about 200px wide, so it wraps longer paths down a line which works fine but isn't desireable.

I can use text-overflow: ellipses which works well except my main concern is being able to see the file name, so it would be better to have it cut off the beginning and show the end.

I'm pretty sure this isn't possible with CSS, so I'm assuming I'll need to use JS, the only issue is I need it to be as unobtrusive as possible - the text in the li is referenced when the object is clicked on.

Any ideas on a good way to approach this?

I know people always want code, so here's what I'm doing: http://jsfiddle.net/qbvcn/

Maybe [threedots](http://tpgblog.com/threedots/) can do this? — GolezTrol, Nov 30 '12 at 18:43

score 1 · Answer 1 · edited May 23 '17 at 11:48

text-overflow is a nice CSS feature to have, but it is somewhat limited to the features it offers. All it does is truncate and add an ellipsis to the end of the text; it doesn't have the options or flexibility to do what you're asking for here.

Many people (including myself) kicked up a fuss when Mozilla refused to support it in Firefox until FF7, but the reasons given by Mozilla for not supporting it sooner, because of its lack of flexibility, were right.

The simple fact is that if you want anything more than a simple trailing ellipsis, you'll need to do it in Javascript. The ThreeDots jQuery plugin pointed out by @GolezTrol in the comments may be useful. There are other options, though.

score 1 · Accepted Answer · edited May 23 '17 at 12:27

A simple solution would be something like this (assuming you'd be willing to use jQuery):

$('li').each(function() {
    var $this = $(this);
    if ($this.text().length > 20) {
        $this.html($this.text().replace(/^(.*)(.{17})$/, '<span style="display:none">\$1</span><span class="ellipsis">...</span>\$2'));
    }
});

This is really only going to work if you know the number of characters your element can hold. Although you can overcome this by adding some javascript to calculate this value you for you, see this question.

CSS text-overflow prepend ellipses

2 Answers2