文本溢出时ellipsis未显示，请求排查问题原因

你犯的核心错误是把实现文本溢出省略号的必要属性拆分到了父子两个元素上。text-overflow: ellipsis生效的前提是，必须和overflow: hidden、white-space: nowrap这两个属性同时作用在同一个块级元素上——这三个属性都是针对元素自身的内容溢出场景设计的，分散到不同元素就无法协同生效。

修正后的代码如下：

CSS 代码 #

.text {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

HTML 代码 #

<div class="test">
  <div class="text">
    dwada wad kowda dwak waodk
  </div>
</div>

简单解释下每个属性的作用：

• width: 100px：给文本容器设置固定宽度，让过长内容有溢出的可能
• white-space: nowrap：强制文本在单行显示，避免自动换行
• overflow: hidden：隐藏超出容器宽度的内容
• text-overflow: ellipsis：用省略号替代被隐藏的溢出部分内容

内容的提问来源于stack exchange，提问作者Dave