How to get an ellipsis to display on text in CSS

Question

I'm trying to get an ellipsis to display on my long text using CSS. This seems to work fine when the text doesn't contain spaces, and so can't be broken (i.e. word wrapped) but when it contains spaces the ellipsis doesn't appear.

My code so are is:

<!DOCTYPE html>
<html>
    <head>
        <style>
span {
    width: 150px;
    display: inline-block;
    border: 1px dotted blue;
    height: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px;
}       
        </style>
    </head>
    <body>
        <div>
            <span>
            This is some long text that I want to have an ellipsis on.
            </span>
        </div>
        <div>
            <span>
            afejaklfjefklafjeklfjeklfjeklfejfklejfkfjeklfjeklfejfklaejfeklfejfklejfklfejfkl
            </span>
        </div>
    <body>
</html>

Here's my fiddle.

Craig Shearer · Accepted Answer · 2013-05-28 02:01:06Z

8

If you add white-space:nowrap ellipsis will come into picture. Reason is your text with spaces will wrap down in case of spaces and it doesn't need to have ellipsis. You can see it in action if you remove your overflow-hidden and text will be displayed wrapped.

span {
    width: 150px;
    display: inline-block;
    border: 1px dotted blue;
    height: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px;
    white-space: nowrap;
}

From doc

The text-overflow declaration allows you to deal with clipped text: that is, text that does not fit into its box. text-overflow comes into play only when: the box has overflow other than visible (with overflow: visible the text simply flows out of the box) the box has white-space: nowrap or a similar method of constraining the way the text is laid out. (Without this, the text would wrap to the next line)

edited May 28, 2013 at 2:01

Craig Shearer

14.6k20 gold badges69 silver badges99 bronze badges

answered May 28, 2013 at 1:52

PSL

124k21 gold badges257 silver badges243 bronze badges

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

Collectives™ on Stack Overflow

How to get an ellipsis to display on text in CSS

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