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/

Answer 1

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.