4月30日.2

CSS 文本折行 / 溢出处理（单行省略 + 指定行数省略） 工作中最常用的两种文本折行 / 溢出隐藏方案，直接复制可用，适配所有场景。 1. 单行文本折行（溢出隐藏 + 末尾省略号） 适用：文字太多，只显示一行，超出部分显示 .text { width: 200px; /* 必须有宽度 */ white-space: nowrap; /* 强制不换行 */ overflow: hidden; /* 溢出隐藏 */ text-overflow: ellipsis; /* 末尾显示省略号 */ border: 1px solid #ccc; }

这是一段非常非常长的单行文本内容，超出宽度会自动隐藏并显示省略号

2. 指定行数折行（多行文本溢出，显示省略号） 适用：限制显示 2 行、3 行... 超出自动换行 + 末尾省略号 最常用、兼容性好的方案： .text { width: 200px; overflow: hidden; /* 溢出隐藏 */ display: -webkit-box; /* 弹性盒子 */ -webkit-line-clamp: 2; /* ⚠️ 控制显示行数：2行、3行改数字即可 */ -webkit-box-orient: vertical; /* 垂直排列 */ border: 1px solid #ccc; }

这是一段很长很长的多行文本，我设置了只显示2行，超出第二行的部分会自动换行隐藏，并且末尾加上省略号，非常适合标题、描述使用

快速记忆 单行：nowrap + overflow + ellipsis 多行：-webkit-line-clamp: 行数 直接控制 总结 只显示一行 → 单行省略方案 显示固定 N 行 → 多行省略方案（改数字就行） 两个方案都是前端最标准、最常用的写法