CSS Text doesn't wrap?

Question

I'm developing a web app and in one of the <div>s on my page, the text doesn't wrap, instead it just overflows.

Now, the <div> has 2 stages: one where it is not expanded, and one where it is. When it is not expanded, I use the following CSS:

div.todo-item-title{
    display: inline-block;
    max-width: 90%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; 
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Using this CSS, I achieve the following effect:

Basically it has a max-width: 90% (so that it doesn't go out of the box), overflow: hidden (so that the overflow is hidden), white-space: nowrap (so that the text doesn't wrap), and text-overflow: ellipsis (so that it shows the 3 dots on the end). And this result is exactly what I want.

Now, in the 2nd state, I extend the height of the <div>'s parent (the black box that you see on the image), and I want the text to show fully and to wrap when necessary.

So this is the CSS that I used on the text:

div.todo-item-title{
    display: inline-block;
    max-width: none;
    text-overflow: initial;
    white-space: normal;
    overflow: auto; 
    position: relative;
    top: 4px;
}

So, there I have:

• Set max-width to none, since I want the text to wrap
• Set white-space to normal so that it does wrap when necessary
• Set overflow to auto so that it shows the scrollbar when it eventually becomes too long.

But, now it looks like this:

For some reason, it still doesn't wrap. What am I doing wrong?

Answer 1

It does not wrap because you have a long word with no spaces.

In this case, use:

word-wrap: break-word;