CSS Text不包装？

Question

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

现在,它<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,我实现了以下效果:

基本上它有一个max-width: 90%(所以它不会开箱即用),overflow: hidden(以便溢出被隐藏),white-space: nowrap(这样文本不会包装),和text-overflow: ellipsis(这样它在结尾显示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,因为我想要文本换行
• 设置white-space为normal在必要时进行包装
• 设置overflow为auto在最终变得太长时显示滚动条.

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

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

Answer 1

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

在这种情况下,使用:

word-wrap: break-word;