显示带分号的省略号

Question

In my fiddle I have three examples of how to show a sort indicator on a table header.

My issue is on the third column. When I shrink to ellipsis, the sort indicator is hidden in Chrome and in IE it is placed on top of the text.

Chrome

IE

Is there a way to have the sort indicator stay snug with the caption and stay visible when displaying the ellipsis (Similar to the second column)?

I've tried breaking the indicator out into its own span, but I can't seem to get the span with the caption to collapse.

Answer 1

For me, this seems more noticeable in IE than Chrome. One way around this might be to use the the CSS content property and move the sort indicator into that and remove the background-image from the .indicator-right class.

jsFiddle example

CSS

.indicator-right:after {
    content:url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
}