css超出显示...不生效 单行多行省略写法

商品列表的标题一长，卡片就被撑开，右边冒出横向滚动条，整个布局全乱了。产品经理说要「css超出显示...」的效果，同事加了三行 CSS，刷新一看还是原样。

单行省略的三个条件缺一不可

核心是这三行：overflow: hidden; white-space: nowrap; text-overflow: ellipsis;。少一个都不行。overflow 负责裁掉超出部分，white-space 阻止换行，text-overflow 才负责画那三个点。元素还得有确定的宽度，行内元素要先 display: block 或者 inline-block，或者放进有宽度的容器里。

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

flex 布局里不生效的原因

父容器 display: flex，子项文字还是把容器撑开，多半是没写 min-width: 0。flex 子项默认 min-width: auto，内容多宽它就多宽，省略号自然没机会出现。给文字那一项加上 min-width: 0，再配合 overflow: hidden，问题一般就解决了。表格里则要给 table 设 table-layout: fixed，否则列宽跟着内容跑。

多行省略用 line-clamp

要显示两行再省略，text-overflow 帮不上忙，得用 -webkit-line-clamp。写法是 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;。这个属性最早是 WebKit 私有，现在主流浏览器基本都支持，但行数变化时高度会跳，卡片列表最好给固定高度。

css超出显示...这类需求，先确认是单行还是多行，再决定用哪套写法。单行就三件套加宽度，多行就 line-clamp 加固定高度。改完在窄屏和长英文单词下各看一遍，英文不换行时最容易把布局顶破。