手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

css如何处理文本单行多行溢出并显示省略号

时间:2024-10-12 06:56:04

1、【开发准备】:新建一个文本标签,用于测试文字溢出的处理方法,本文基于uniapp开发,文本标签使用view。

css如何处理文本单行多行溢出并显示省略号

2、【溢出分析】:给文字指定高度之后,超过部分会直接显示出来,这种情况就叫溢出。

css如何处理文本单行多行溢出并显示省略号
css如何处理文本单行多行溢出并显示省略号

3、【溢出隐藏】:在指定高度的同时,使用overflow: hidden;直接将溢出部分隐藏。

css如何处理文本单行多行溢出并显示省略号
css如何处理文本单行多行溢出并显示省略号

4、【单行显示省略号】:在处理溢出的同张虢咆噘时,使用white-space: nowrap;和text-overflow: ellipsis;前者作用是使文本不换行,后者显示为...。

css如何处理文本单行多行溢出并显示省略号
css如何处理文本单行多行溢出并显示省略号

5、【多行显示省略号】:在处理溢出之后,使用display: -webkit-box将对象设置为弹性伸缩盒子,-webkit-造婷用痃line-clamp: 2指定行数,-webkit-box-orient: vertical设置子元素的排列方式;最后,使用text-overflow: ellipsis,超出指定行数的内容将会显示为...。

css如何处理文本单行多行溢出并显示省略号
css如何处理文本单行多行溢出并显示省略号

6、【完整内容】:overflow: hidden; white-space: nowrap; text-over熠硒勘唏flow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;

© 手抄报圈