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: stackoverflow.com/questions/4927257/… — SeanCannon
– SeanCannon, Commented May 25, 2012 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
– Stu Cox, Commented May 25, 2012 at 23:47

Community · Accepted Answer · 2017-05-23 12:07:17Z

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, 2017 at 12:07

CommunityBot

11 silver badge

answered May 25, 2012 at 23:41

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Storm3y Over a year ago

Seems to work fine on jsfiddle.net - I have the styling in a separate stylesheet.

SeanCannon Over a year ago

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.

Oliver Schafeld · Accepted Answer · 2015-04-15 11:24:07Z

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; }

Collectives™ on Stack Overflow

HTML / CSS Ellipsis (...) Not Working

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related