CSS 文本不换行？

Question

我正在开发网络应用程序，并且在 <div>s 之一中在我的页面上，文本没有换行，而是溢出了。

现在，<div>有 2 个阶段:一个不展开，一个展开。当它不展开时，我使用以下 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 (以便 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;