Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 920
Storm3y Avatar asked May 25 '12 23:05

Storm3y


People also ask

Why is my text-overflow ellipsis not working?

text-overflow: ellipsis only works when the following is true: Parent element is not set to display: inline (span's default,) You must use display: block or display: inline-block. The element's width must be constrained in px (pixels) – it doesn't work with values specified using % (percent.)

How do I show an ellipsis in CSS?

To clip at the transition between characters you can specify text-overflow as an empty string, if that is supported in your target browsers: text-overflow: ''; . This keyword value will display an ellipsis ( '…' , U+2026 HORIZONTAL ELLIPSIS ) to represent clipped text.

How do you use text ellipsis in CSS?

A text-overflow property in CSS is used to specify that some text has overflown and hidden from view. The white-space property must be set to nowrap and the overflow property must be set to hidden. The overflowing content can be clipped, display an ellipsis ('…'), or display a custom string.

How does text-overflow ellipsis work?

The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or display a custom string.


1 Answers

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.

like image 169
AlienWebguy Avatar answered Nov 09 '22 10:11

AlienWebguy