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

文本,可以根据字数的长度,控制...显示吗
像这样,在第二行显示...

回答

多行显示“...”,一般可以通过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;

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

以上是 文本,可以根据字数的长度,控制...显示吗 的全部内容, 来源链接: utcz.com/a/69085.html

回到顶部