HTML / CSS Ellipsis (...) Not Working

Question

I'm attempting to get ellipsis working on my site. This is the following HTML / CSS code and it doesn't appear to be working.

CSS:

.oneline {
text-overflow:ellipsis;
white-space: nowrap;
width: 50px;
overflow: hidden;
}

HTML:

<div class="oneline">Testing 123 Testing 456 Testing 789</div>

Check out this answer if you're on FF: http://stackoverflow.com/questions/4927257/text-overflowellipsis-in-firefox-4-and-ff5 — AlienWebguy, May 25 '12 at 23:37
This shouldn't even need a CSS3 compatible browser - even IE6 renders `white-space:nowrap` and `text-overflow:ellipsis` correctly. — Stu Cox, May 25 '12 at 23:47
Managed to fix it by styling the paragraph rather than the whole div. Cheers :) — Storm3y, May 26 '12 at 00:12

score 11 · Accepted Answer · edited May 23 '17 at 12:07

11

Based on the initial post, we're all assuming the obvious, but just in case ... ;)

<style type="text/css">
    .oneline {
        text-overflow : ellipsis;
        white-space   : nowrap;
        width         : 50px;
        overflow      : hidden;
    }
</style>
<div class="oneline">Testing 123 Testing 456 Testing 789</div>

http://jsfiddle.net/NawcT/

EDIT: Solution was to style the paragraph vs the div.

edited May 23 '17 at 12:07

Community

1
1

answered May 25 '12 at 23:41

AlienWebguy

76,997
17
122
145

Seems to work fine on jsfiddle.net - I have the styling in a separate stylesheet. – Storm3y May 26 '12 at 00:06
Are you using multiple stylesheets? Maybe you have a resetter which is clobbering your `text-overflow` or `overflow` rules. You can try adding `!important` after the rule assignments to test that theory. – AlienWebguy May 26 '12 at 00:11

score 0 · Answer 2 · answered Apr 15 '15 at 11:24

Assigning position:absolute to the element to be truncated will probably have less undesired side-effects that float:left.

This worked for me:

div {
  position: absolute;
  width: 70px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

HTML / CSS Ellipsis (...) Not Working

2 Answers2