像这样,在第二行显示...
// utils.js
export const ellipsis = count => str =>
str.length > count ? str.substr(0, count) + "..." : str;
// 使用
const ellipsis10 = ellipsis(10);
const string = 'asdfasdfasdf'
console.log(ellipsis10(string))
你可以根据判断长度截取;或者可以使用多行文本省略的样式
display:-webkit-box;
overflow:hidden;
text-overflow:ellipsis;
-webkit-line-clamp:2; // 控制显示行数
-webkit-box-orient:vertical;
适用范围:
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;
记得前两天有个类似的问题:https://segmentfault.com/q/10...
还有大佬写了对应的库: https://segmentfault.com/a/11...
27 回答12.8k 阅读
6 回答2.1k 阅读✓ 已解决
8 回答3.4k 阅读✓ 已解决
6 回答950 阅读✓ 已解决
5 回答5.1k 阅读✓ 已解决
4 回答1.5k 阅读✓ 已解决
3 回答1.7k 阅读
多行显示“...”,一般可以通过css方法实现,也可以通过js方法实现
像截图中的效果,肯定是通过js方法实现的。当超过一定字数后,截取文本,加上“...”就行
额外介绍css方法实现,
单行:
多行(部分浏览器有兼容性问题):