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;