Text overflow: ellipsis in IE
When I use text-overflow: ellipsis;
in IE I have a problem with two long words:
In Chrome it looks like this:
firstlongword1 ...
secondlongword2 ...
In IE:
firstlongword1 ...
secondlongword2 // word is truncated, but dots are not represented
HTML and CSS:
.orange {
color: #f58026;
text-overflow: ellipsis;
display: block;
overflow: hidden;
}
<span class="orange" title="12 12">first_verylongworddddddddddddddddddddddddddddddddddddddddddd second_verylonglonglonglonglonglonglonglonglonglong</span>
If anyone has any problem with this please help. Or please tell me if there is another way to fix it.
source to share
Checking the CSS spec would show that Chrome (and Firefox) render the ellipsis correctly, IE appears to be behind the curve. Go to http://www.w3.org/TR/css3-ui/#text-overflow0 and scroll down to Example 9 to see demos on how it text-overflow:ellipsis;
should be rendered.
As such, the seemingly only way to get a similar result in IE is to wrap words in their own elements:
.orange {
color: #f58026;
display: block;
text-overflow: ellipsis;
}
.orange span {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
<span class="orange" title="12 12">
<span>first_verylongworddddddddddddddddddddddddddddddddddddddddddd</span>
<span>second_verylonglonglonglonglonglonglonglonglonglong</span>
</span>
JS Fiddle: http://jsfiddle.net/fL6za37f/2/
source to share
Add ellipsis when overflowing the text containing the element is globally supported, although you can use the jQuery ellipsis plugin http://plugins.jquery.com/ellipsis/ or below (got it long since forgotten the source) which is based on the container width:
$.fn.ellipsis = function(){
return this.each(function() {
var el = $(this);`
if(el.css("overflow") == "hidden"){
var text = el.html();
var multiline = el.hasClass('multiline');
var t = $(this.cloneNode(true))
.hide()
.css('position', 'absolute')
.css('overflow', 'visible')
.width(multiline ? el.width() : 'auto')
.height(multiline ? 'auto' : el.height())
;
el.after(t);
console.log('Container width: t.width(): ' + t.width() + ' text: '+ text);
console.log('Container width: t.height(): ' + t.height());
function height() { return t.height() > el.height(); };
function width() { return (t.width()+2) > el.width(); };
var func = multiline ? height : width;
while (text.length > 0 && func()){
text = text.substr(0, text.length - 1);
t.html(text + "...");
}
el.html(t.html());
t.remove();
}
});
};
source to share
you need to put "white-space: nowrap;" in the orange class
.orange {
color: #f58026;
text-overflow: ellipsis;
display: block;
overflow: hidden;
white-space: nowrap;
}
<span class="orange" title="12 12">first_verylongworddddddddddddddddddddddddddddddddddsfgdsdfgdfgsdfhdfhsdfhsdfhdddddddddd second_verylonglonglonglonglonglonglonglonglonglong</span>
source to share