CODEWITHSUNDEEP
htmlcssoverflow
bool3max
bool3max

Reputation: 2865

Problems with overflow: hidden and text-overflow: ellipsis

I've got the follwoing HTML markup:

    <div class="todo-item">
        <div class="todo-complete-box"></div>
        <div class="todo-item-title">Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something
        </div>
    </div>

And the following CSS:

div.todo-item{
    width: 100%;
    border: 1px solid black;
    border-radius: 5px;
    padding: 7px;
    height: 45px;
    max-height: 45px;
    white-space: nowrap;
    overflow: hidden;
}
div.todo-complete-box{
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid black;
    border-radius: 2px;
    padding: 0px;
    margin: 0px;
    position: relative;
    top: 5.5px;
    margin-right: 10px;
}
div.todo-item-title{
    display: inline-block;
    max-width: 100%;
}

The <div class="todo-item"> is just a container. It's width is 100%. I added the white-space: nowrap; and overflow: hidden properties to it, so that when the title in the <div class="todo-item-title"> is too long, it doesn't go out of the box.

Now it looks like this:

Without text-overflow

But when I add the text-overflow: ellipsis; property to the <div class="todo-item"> element:

div.todo-item{
    text-overflow: ellipsis;
}

, it looks like this:

With text-overflow

As far as I know the 3 dots should be displayed at the end of the text, and not just replace the text alltogether (http://www.w3schools.com/cssref/playit.asp?filename=playcss_text-overflow&preval=ellipsis)

What's the problem here? Thanks.

Upvotes: 2

Views: 3637

Answers (2)

Jen
Jen

Reputation: 1733

Put the ellipsis onto the .todo-item-title (the container for the text, rather than the parent).

Here's a working example: https://jsfiddle.net/fvuuLegL/

div.todo-item-title{
 display: block; position:absolute; left: 0px; top:13px; padding-left:44px;
 max-width: 100%;
 white-space: nowrap;
 overflow: hidden;
 text-overflow:ellipsis; 
}

Also changed your css a bit so it uses relative and absolute positioning within the box, so nothing can fall out of alignment.

Upvotes: 3

Alex
Alex

Reputation: 8695

You have to add overflow:hidden; to the element and reduce max-width:90%;.

Jsfiddle

div.todo-item-title {
    display: inline-block;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
}

Upvotes: 1

Related Questions