当前位置: 首页 > news >正文

css单行文本省略号多行文本省略号

设置单行文本省略号的写法 :

先设置宽固定的宽度 :width: 300px;
设置不换行 :white-space:nowrap;
设置省略号:text-overflow: ellipsis;
裁剪多余的内容/溢出的内容:overflow: hidden;

width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

多行文本省略号的写法

width: 200px;
/* 主要控制父元素容器里面子元素的排列方式 */
display: -webkit-box;
display: -moz-box;
white-space: pre-wrap;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
/* 实现限制文字显示多少行,也就是说要多少行是出现省略号,我这里设置三行就让文本出现省略号 */
-webkit-line-clamp: 3;
/*显示行数  要几行就改几行*/
http://www.lryc.cn/news/103980.html

相关文章:

  • 信号槽中的函数重载
  • 计算机视觉(五)深度学习基础
  • ES6学习-Generator
  • Flowable-服务-微服务任务
  • opencv03-补充-vector的操作
  • 二叉树(C语言)
  • 介绍下Django中的表单(forms)模块中的类forms.CharField
  • 元宇宙与数字孪生的异同?
  • 智慧农业:科技赋能农村发展
  • x86架构ubuntu22下运行WILL模拟器dophin
  • Jvm的一些技巧
  • 8.docker仓库
  • 价值 1k 嵌入式面试题-计算机网络 OSI
  • spring boot去除get post空格
  • 设计模式四:单例模式(Singleton)
  • 《水经注地图服务》发布的影像数据如何在OsgEarth中调用
  • css滤镜:drop-shadow
  • java ThreadLocal
  • MySQL高级篇第6章(索引的数据结构)
  • Unity 性能优化三:动画模块、物理模块
  • 延迟函数
  • IBM报告:2023数据泄露平均成本将达到445万美元
  • 20.3 HTML 表格
  • flutter项目运行时一直卡在Running Gradle task ‘assembleDebug‘解决办法
  • “深入理解Spring Boot:从入门到精通“
  • IP 工具
  • Linux - 进程概念(进程状态、优先级)
  • k8s概念-deployment
  • Flutter 调试工具篇 | 壹 - 使用 Flutter Inspector 分析界面
  • 什么是云原生和 CNCF?