CSS - Custom select text-overflow

Question

I wanted to make a custom select in HTML with CSS only. So I did the trick with the around the select in order to have a custom arrow (View here).

I want to set the text-overflow of the select to 'ellipsis'. But now long options overlap my custom-arrow. Is there a way to limit the max. text-width of a select, so that the ellipsis would be before my custom arrow?

PS: I am using Firefox and I only want to use CSS for this. So please no solutions in JS.

Thanks in advance

you didn't do that.. I had read the same in a blog. – Mr_Green Jun 16 '14 at 12:53 — Mr_Green, Jun 16 '14 at 12:53
possible duplicate of [How to style a – Mr_Green Jun 16 '14 at 12:58 — Mr_Green, Jun 16 '14 at 12:58

score 0 · Answer 1 · answered Jun 16 '14 at 13:03

This should help:

.truncate {    
    max-width: TRUNCATION-BOUNDARY;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Fiddle

So in your case just set max-width to something like 90% (or even less), so it doesn't overlap you arrow anymore.

CSS - Custom select text-overflow

1 Answers1