Text overflow ellipsis not showing with some custom font

Question

I\'m currently trying to make a text box with hiding overflowing text. It works fine, but for some part. I\'m using

text-overflow: ellipsis;

<

Answer 1

To completely imitate the functionality of text-overflow: ellipsis without using JavaScript while still having complete browser support (text-overflow: "..." only works in Firefox 9 in the time of this post, and is completely unavailable on any other browser) is extremely difficult (if not impossible).

The only solution I can think of without any "hacks" is to edit your font file, creating a unicode character for the ... ellipsis character. I have next to no experience in this area, but here's a link that seems pretty good: http://sourceforge.net/projects/ttfedit/

Here's some HTML code I've got:

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vehicula, augue id pretium euismod, nisi dolor sodales orci, non porttitor ligula velit ac lorem.

And some CSS:

#wrapoff {
  width: 200px;
  border: 2px solid blue;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
#wrapoff:after {
  content: "...";
  position: absolute;
  right: 0;
  top: 0;
  background-color: white;
  padding: 0 5px;
}

This adds a pseudo-element on top of the #wrapoff div, at the top right hand corner, allowing the content to work like text-overflow: ellipsis. The downside to this is that the "ellipsis" always shows there, regardless of whether the content actually extends off and overflows. This cannot be fixed, as there is no way using CSS to figure out whether the text overflows off the page.

Here's a JSFiddle:

http://jsfiddle.net/ysoxyuje/

The border is to show you the size of the element itself.