在网站开发中，尤其是商品列表、博客页面和资讯流里，经常需要把过长的文本进行截断，避免破坏页面布局。CSS 中有两种常用方式：单行文本截断 和 多行文本加省略号截断。下面详细讲解两者的区别、原理和使用场景。
一、单行文本截断：简单通用
这是最简单的文本隐藏方式，只保留一行文字，超出部分自动隐藏并显示省略号。
工作原理
禁止文字自动换行，超出容器宽度的内容直接隐藏，末尾自动出现省略号。
.text-single {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
--优点
-兼容所有浏览器
-代码简洁易懂
-适合标题、商品名称等短文本
--缺点
-文字可能会从单词中间截断，排版不够美观
-只能限制一行，无法展示多行内容
二、多行文本截断：适合长描述
如果需要展示两行、三行文字再截断，就用到 -webkit-line-clamp 多行省略方案。
工作原理
文字正常自动换行，浏览器自动计算行数，达到设定行数后隐藏剩余内容，并自动添加省略号
.text-multi {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
--优点
-可自由设置显示 2 行、3 行、任意行数
-文字按词语正常换行，排版整齐好看
-适合商品描述、用户评价、文章简介
--缺点
-需要带 -webkit- 浏览器前缀
-如果同时设置 white-space: nowrap，多行截断就会失效。
总结
--短标题、商品名称用 单行截断；
--商品描述、长评论、简介文字用 多行截断，排版更整洁美观。