后台列表的标题一长，卡片就被撑破，行尾也没有省略号。加一句 text-overflow: ellipsis 还是没效果，问题多半出在缺了 overflow 和 white-space 这两条。css省略号不是单个属性，得几个条件一起满足。

单行省略：三个属性缺一不可

先给容器一个明确宽度，然后写：

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

overflow 负责把超出的部分裁掉，white-space: nowrap 阻止换行，text-overflow 才轮到画那三个点。宽度靠父级限制时，父级得是块级元素或者设了 max-width。行内元素直接加没用，改成 inline-block 或 block 再试。

多行省略：line-clamp 的坑

要显示两行再截断，用 -webkit-line-clamp：

.desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}

它需要 display: -webkit-box 配合，单独写 line-clamp 不生效。现在多数浏览器都认这套写法。行高要固定，不然截断位置会飘。想加淡出效果可以用 mask-image 做渐变，但别和 overflow: hidden 抢。

Flex 和表格里为什么失效

父级 display: flex 时，子项默认 min-width: auto，内容会把盒子撑开，省略号永远不出现。给子项加 min-width: 0 或者 width: 0，再配 flex: 1 就好了。表格的 td 上直接写 text-overflow 也常失效，给 td 内部套一层 div 设宽度更稳。做响应式别把宽度写死，用 max-width 加百分比。

css省略号这套写法不复杂，先确认容器有宽度、overflow 和 nowrap 都到位，再排查 flex 的 min-width。三个点显示不出来，九成是漏了其中一条。