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;