Text overflow ellipsis not showing with some custom font - html

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 ?

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.

Answer 2

Make sure you have
white-space: nowrap;
overflow: hidden;
with your
text-overflow: ellipsis;

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!

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/

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 selectorand change the font-family property to another font that supports ellipsis _

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

Answer 7

You need to use the following together:
white-space: nowrap;
text-overflow: ellipsis;