文本，可以根据字数的长度，控制...显示吗

Question

像这样，在第二行显示...

Answer 1

多行显示“...”，一般可以通过css方法实现，也可以通过js方法实现
像截图中的效果，肯定是通过js方法实现的。当超过一定字数后，截取文本，加上“...”就行

额外介绍css方法实现，
单行：

white-space: nowrap;
overflow:hidden;
text-overflow:ellipsis;

多行（部分浏览器有兼容性问题）：

display:-webkit-box;
overflow:hidden;
text-overflow:ellipsis;
-webkit-line-clamp:2; // 控制显示行数
-webkit-box-orient:vertical;

Answer 2

// 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))

Answer 3

你可以根据判断长度截取；或者可以使用多行文本省略的样式

display:-webkit-box;
overflow:hidden;
text-overflow:ellipsis;
-webkit-line-clamp:2; // 控制显示行数
-webkit-box-orient:vertical;

适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

Answer 4

记得前两天有个类似的问题：https://segmentfault.com/q/10...

还有大佬写了对应的库： https://segmentfault.com/a/11...

Answer 5

// 比如截取10个
str = str.length > 10 ? str.slice(0, 10) + '...' : str