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 ?

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

Solution 2

Make sure you have

white-space: nowrap;
overflow: hidden;

with your

text-overflow: ellipsis;

Solution 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!

Comments

[Paulie_D]

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

[Jeremy Carlson]

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

[easwee]

Custom ellipsis has very poor support.

[mmgross]

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?

[maioman]

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