如何让多余的文本省略号显示首先要说几个属性的作用： whitespace:nowrap 中文行末不断行显示 overflow： 控制超出文本的显示方式：hidden 超出范围文本隐藏；scroll 始终显示滚动条；auto 根据文字多少自动显示滚动条 ...

如上代码所示，限制文段宽度，可用width或max-width，方法简单但实用。 ...

假如有这么一个元素，左侧是一个固定宽度头像，右侧是内容且内容一行显示不下。 在某些时候我们需要让右侧内容固定不换行（比如title太长的情况） 这里会发现text-overflow: ellipsis不生效，省略符根本没有出现。尝试取消右侧容器元素 ...

大致是有一个 main 容器是 flex 布局，左边一个 logo 固定宽高，右边 content 动态宽度。 .notice 会非常长，一些设备下需要隐藏显示，即不换行，并留下省略符 ... 作标记。 这里会发现 text-overflow: ellipsis 不生效，省略符根本 ...

问题：正常情况下，要设置单行文字超出省略号显示，加三个属性 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 但是这个地方是从两行改成一行，网上搜了很多答案，要改父元素的width：0;之类的，经css挨个排查 ...

在写页面的时候，我们经常会需要用到关于文本的换行，强制换行以及显示几行超过显示省略号等，今天我们就对这些问题来做个汇总吧！ 1、自动换行 2、强制不换行 3、强制英文单词换行 4、单行文本不换行多余文本显示省略号 5、多行文本超出 ...

3、强制英文单词换行 4、单行文本不换行多余文本显示省略号 5、多行文本超 ...

强制换行 word-wrap:break-word; （单词换行） word-break:break-all; （单个字符换行） 强制不换行 white-space:nowrap; 单行文字超出显示省略号（注意：配合宽度） overflow:hidden ...