1、只显示一行文字后隐藏并省略
|
1 2 3 4 5 6 7 |
// 只显示一行文字后省略 .element { width: 300px; /* 需要设置一个固定宽度 */ white-space: nowrap; /* 强制单行显示，不换行 */ overflow: hidden; /* 超出盒子部分隐藏 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ } |
2、显示指定行数文字后隐藏并省略
|
1 2 3 4 5 6 7 8 9 |
// 显示多行文字后省略 .element { width: 300px; /* 需要设置一个固定宽度 */ display: -webkit-box; /* 使用弹性盒布局 */ -webkit-box-orient: vertical; /* 垂直排列 */ -webkit-line-clamp: 3; /* 显示三行 */ overflow: hidden; /* 超出盒子部分隐藏 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ } |
多行文本省略，通过使用 display: -webkit-box; 弹性盒子布局，配合 -webkit-line-clamp 实现多行文本截断。
注：这套方法适用于 WebKit 内核浏览器（如 Chrome、Safari 等）。对于其他浏览器，可能需要额外的 polyfill 支持。
其他解决方案
1、使用 JavaScript 动态地计算文本内容的高度并进行截断。
2、使用已有的库：如：Clamp.js
Clamp.js：一个轻量级的库，用于实现跨浏览器的多行文本截断。
|
1 2 3 4 5 6 7 8 |
//单行 $clamp(myHeader, {clamp: 1}); //多行 $clamp(myHeader, {clamp: 3}); //根据可用高度自动计算行数 $clamp(myParagraph, {clamp: 'auto'}); //根据固定高度自动计算行数 $clamp(myParagraph, {clamp: '35px'}); |
3、CSS Fallback（部分兼容方案）
对于某些浏览器，虽然没有直接支持 -webkit-line-clamp 的属性，但我们可以结合一些简单的 CSS 来实现近似效果。
|
1 2 3 4 5 6 7 8 |
.element { display: block; /* 显示为块 */ overflow: hidden; /* 隐藏超出内容 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ line-height: 1.5em; /* 设置行高 */ max-height: 4.5em; /* 3行的最大高度，3行 * 1.5行高 = 4.5em */ white-space: normal; /* 保持正常的文本换行 */ } |
这种方案虽然无法在所有情况下实现精确的多行截断，但在支持基本的多行文本省略显示方面仍然适用。
