CSS 文字不换行？

Question

我正在开发一个网络应用程序，在我页面上的一个 <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;

CSS 文字不换行？

CSS Text doesn't wrap?

css

whitespace

overflow