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;

  • myeclipse怎么添加行号
  • 在MySqlWorkbench中创建和查看多列索引
  • 如何将MD文件转换为无样式的HTML文件?
  • 完全卸载bluestacks的教程
  • 用windows自带的防火墙屏蔽不希望联网的程序
  • 热门搜索
    依法治校手抄报 清明时节祭英烈手抄报 运动手抄报 俭以养德手抄报 愚人节手抄报 小组手抄报 美丽家园手抄报内容 我爱科学手抄报内容 科技节手抄报资料 关于健康的手抄报图片