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

From what I understand you're problem is that, in the font you're using, you're missing the ellipsis character.

To quickly fix this you could select this last-letter with the ::last-letter pseudo-element selector
and change the font-family property to another font that supports ellipsis _

Answer 2

http://jsfiddle.net/cbppL/707/

HTML

<header>
<h1>Long text is so long oh my is long indeed</h1>
</header>

CSS

header {
border:1px solid red;
width:150px;
position:relative;
}

h1 {
   overflow:hidden;
    white-space:nowrap;
   /* -ms-text-overflow:ellipsis; */
    /* text-overflow:ellipsis; */
    width:150px;
    height:1.2em;
}
header:after{
    content:"...";
    position:absolute;
    top:0;
    right:0;
    background:#fff;
}
h1:hover {
    overflow:visible;
}

Not a very good solution. It will depend on what kind of background you have. Hope Helps!

Answer 3

So, I know this isn't ideal but it is a work-around. The CSS3 specification says that the ellipsis must take their style from the container that they're in. This works correctly in all browsers except IE8/9 which takes it's ellipsis style from the first letter of the container. The work-around I propose is to wrap the text inside of your "overflowed" elements with an inline element, give the outer container a font where the ellipsis character is defined and give the inline element inside your custom font. It would look something like this fiddle: http://jsfiddle.net/u9dudost/2/

If you need to add IE8/9 support, add the following:

div {
    white-space: nowrap;
}

div::before {
    font-family: 'Helvetica', sans-serif; /* Your custom font here. */
    content: ''; /* IE9 fix */
}

Answer 4

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:

<div id="wrapoff">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vehicula, augue id pretium euismod, nisi dolor sodales orci, non porttitor ligula velit ac lorem.
</div>

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.

Answer 5

Instead of "ellipsis", you can actually specify your own set of characters to signify text overflowing.

If your custom font has the period defined, you should be able to just use three periods like this:

text-overflow: '...';

Here's a JSFiddle of it in action: http://jsfiddle.net/x5e6yv21/

Answer 6

Make sure you have

white-space: nowrap;
overflow: hidden;

with your

text-overflow: ellipsis;