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

默认显示两行文字,多余的文字省略掉,变成省略号

display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;

1.display:-webkit-box:这个属性的意思是将元素的显示模式设置为Webkit内核特有的弹性盒模型(-webkit-box是旧版弹性盒语法,现代浏览器已支持标准display:flex,但这里为了兼容多行截断逻辑保留)。

目的是配合-webkit-box-orient和-webkit-line-clamp,让文本按照盒模型的垂直方向排列,为多行截断做基础布局准备。

2.-webkit-line-clamp:2:这个作用是限制元素内文本显示的最大行数,这里值为2表示最多显示2行文本,超出部分会被隐藏并替换为省略号。

3.-webkit-box-orient:vertical:作用是设置-webkit-box弹性盒模型的子元素(这里主要是文本行)排列方向为垂直方向,让文本能按行堆叠,这样-webkit-line-clamp才能准确计算并截断行数。

4.overflow:hidden;作用是隐藏超出元素容器范围的内容,因为前面限制了文本最多显示2行,超出的文本物理上还在容器内,通过overflow:hidden把超出部分裁剪掉,视觉上就看不到了。

5.text-overflow:ellipsis;作用当文本发生溢出时,在溢出内容的末尾显示省略号

http://www.dtcms.com/a/287933.html

相关文章:

  • Vue状态管理:Vuex模块设计方案
  • SpringBoot服装推荐系统实战
  • C++string类(2)
  • fclose 函数的概念和使用案例
  • GEE:批量处理和下载SoilGrids 250m v2.0
  • 区块链可投会议CCF A--ICDE 2026 截止10.27 附录用率
  • 【科研绘图系列】R语言绘制显著性标记的热图
  • 数学建模:运筹优化类问题
  • 3.5软件开发活动[2-系统设计]面向对象设计-UML统一开发过程
  • 短视频矩阵的未来前景:机遇无限,挑战并存
  • Tomcat 生产 40 条军规:容量规划、调优、故障演练与安全加固
  • Linux Ubuntu安装教程|附安装文件➕安装教程
  • 尚庭公寓-----day2 业务功能实现
  • PHP 就业核心技能速查手册
  • Delphi XE 自带了 Base64编码解码
  • 前端知识回顾-登录界面
  • 从“数字土著”到“数据公民”:K-12数据伦理课程的设计、实施与成效追踪研究
  • 开启你的专属智能时代:枫清科技个人智能体限时体验计划上线!
  • 简单易懂,段页式管理
  • 【leetcode100】寻找重复数
  • Codeforces Round 1037 (Div. 3)(补题)
  • 数据结构与算法之美:拓扑排序
  • Kimi K2 日调用量超100亿 token,API 价格低于 Claude 系列模型
  • 正则表达式概述
  • 垃圾回收(GC)
  • 机器学习漫画小抄 - 彩图版
  • Linux内核设计与实现 - 第6章 内核数据结构
  • 编程思想:程序自身的模型/函数模型硬件标准如何实现
  • MCP 协议分析 二 Sampling
  • synchronized锁升级机制