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;

This should put three dots ("...") at the place where my text is cut off, but it doesn't place three dots, instead it places the character which looks like three dots (called 'ellipsis').

The font I'm currently using doesn't have this character, so it shows some other random character instead of three dots.

Does anyone have a simple workaround (no javascript involved please, only CSS), while keeping my font for the text ?

Ahvenanmaa

just fyi... the name of the character is, by no coincidence, 'ellipsis'. I'm curious to hear answers to this question as well--I had to resort to changing the font for browsers which had this problem (cough cough IE). – Choker

You could use a unicode-range in a @font-face declaration but support is very limited. – Gem

@Gem Yeah, thanks it works on Chrome. I'm still looking for a better solution, but at least it's a start, thanks a lot. – Ahvenanmaa

Can you create an example for us to look at? Be nice to see what font you are using etc. – Melchizedek

this really helps me as well :D – Tortilla

So the text-overflow: ellipsis; alone does not add "...". It must be used together with other properties. Here's a text overflow ellipsis tutorial that goes in depth on this. – Originally

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:

<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.

Nonsectarian

Answer 2

Make sure you have

white-space: nowrap;
overflow: hidden;

with your

text-overflow: ellipsis;

Mob

Answer 3

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!

Viv

Answer 4

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/

Skricki

I don't see the three dots showing up, so this doesn't work for me (Chrome 29) – Mantelpiece

Custom ellipsis has very poor support. – Writeoff

Answer 5

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 _

Arabic

I'm having a difficult time finding anything (such as browser support or even an official spec) on that pseudo-element. Can you link to any information? – Opah

actually there's no CSS support yet to last-letter pseudoelement (even if it's been a while since it has been requested) ; but there's a cool JS Jquery pluging that does: lettering.js ; also you can check more at css-tricks.com/a-call-for-nth-everything this is where I've learned about it.. – Arabic

Answer 6

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 */
}

Axel

Answer 7

You need to use the following together:

white-space: nowrap;
text-overflow: ellipsis;

Sleave