CODEWITHSUNDEEP
css
Craig Shearer
Craig Shearer

Reputation: 14521

How to get an ellipsis to display on text in CSS

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.

Upvotes: 3

Views: 2563

Answers (1)

PSL
PSL

Reputation: 123739

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)

Upvotes: 8

Related Questions