CSS Text不包装？

我正在开发一个Web应用程序,并且在我的页面上的< div>之一中,文本没有换行,而只是溢出.

现在,< div>有两个阶段：一个没有扩展,一个在哪里.
当它没有展开时,我使用以下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%);
}

使用这个CSS,我实现了以下效果：

基本上它有一个最大宽度：90％(这样它不会开箱即用),溢出：隐藏(以便溢出被隐藏),白色空间：nowrap(这样文本不会包装) )和文本溢出：省略号(这样它在末尾显示3个点).而这个结果正是我想要的.

现在,在第二个状态,我扩展了< div>的父级(你在图像上看到的黑盒子)的高度,我希望文本完全显示并在必要时包装.

所以这是我在文本中使用的CSS：

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

那么,我有：

>将max-width设置为none,因为我希望文本换行
>将白色空间设置为正常,以便在必要时进行包装
>将溢出设置为auto,以便在最终变得太长时显示滚动条.

但是,现在它看起来像这样：

出于某种原因,它仍然没有包装.我究竟做错了什么？

它没有换行,因为你有一个没有空格的长词.

在这种情况下,使用：

word-wrap: break-word;