CODEWITHSUNDEEP
htmlcsstextoverflowellipsis
Storm3y
Storm3y

Reputation: 121

HTML / CSS Ellipsis (...) Not Working

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>

Upvotes: 5

Views: 22239

Answers (2)

Oliver Schafeld
Oliver Schafeld

Reputation: 19216

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

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 77956

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.

Upvotes: 11

Related Questions