How can I make css generate an ellipsis on text overflow?

Question

I'm working with this jsfiddle. I would like the <p>Super long words here</p> to look like Super lon... instead of showing the full text. I tried adding

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

But it didn't work. How can I get my overflow text to end in an ellipsis?

display-name-is-missing · Accepted Answer · 2014-02-03 18:18:25Z

2

You have to specify a width to achieve this effect, like this:

.pClass p {
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width:20px;
}

Fiddle

answered Feb 3, 2014 at 18:18

display-name-is-missing

4,4055 gold badges31 silver badges42 bronze badges

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

Collectives™ on Stack Overflow

How can I make css generate an ellipsis on text overflow?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related