Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.6k views
in Technique[技术] by (71.8m points)

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

image.png
像这样,在第二行显示...


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share

2.1m questions

2.1m answers

63 comments

56.5k users

...