Geek asks and answers

HTML / CSS ellipsis (...) not working

I am trying to get ellipsis to work on my site. This is the following HTML / CSS code and it does not seem to work.

CSS

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

HTML:

<div class="oneline">Testing 123 Testing 456 Testing 789</div>
+5
source share
2 answers

Based on the initial post , we all accept 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 . The solution was to style the paragraph against the div.

+10
source

Assigning to an position:absoluteelement that will be truncated is likely to have less unwanted side effects that are float:left.

This worked for me:

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

More articles:


All Articles