单行文本溢出方法：
方法一:
显示省略号（ellipsis）：当单行文本溢出时，显示省略号表示被截断了。具体实现方式是设置 text-overflow:ellipsis，并且必须还要设置 white-space 和 overflow 属性。
.text { white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 超出部分隐藏 */ text-overflow: ellipsis; /* 显示省略号 */ }
方法二：
显示字符串（string）：当单行文本溢出时，显示指定的字符串。具体实现方式是设置 text-overflow: string，并且同时设置 content 属性。
.text { white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 超出部分隐藏 */ text-overflow: clip; /* 剪切 */ } .text::after { content: "..."; /* 溢出时显示... */ }
方法三：
不换行（clip）：当单行文本溢出时，直接将超出部分剪切。具体实现方式是设置 text-overflow: clip，并且必须还要设置 white-space 和 overflow 属性。
.text { white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 超出部分隐藏 */ text-overflow: clip; /* 剪切 */ }
多行文本溢出:
方法一：
显示省略号（ellipsis）：当多行文本溢出时，显示省略号表示被截断了。具体实现方式是设置 display: -webkit-box，-webkit-box-orient: vertical，并且必须还要设置 overflow 和 text-overflow 属性。
.text { display: -webkit-box; -webkit-line-clamp: 3; /* 限制行数 */ -webkit-box-orient: vertical; /* 设置为垂直方向 */ overflow: hidden; /* 超出部分隐藏 */ text-overflow: ellipsis; /* 显示省略号 */ }
方法二：
使用 JavaScript 处理多行文本溢出：在实际开发中，我们也可以通过使用 JavaScript 来处理多行文本溢出。比较流行的库有 line-clamp.js 和 clamp.js 等。
<div class="text" id="text"> 一段多行文本，需要进行溢出处理... </div> <script src="https://unpkg.com/clamp-js/dist/clamp.min.js"></script> <script> clamp(document.getElementById('text'), { clamp: 3 });
