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

css---实现文本超过两行时显示省略号(...)的效果

可以使用CSS中的text-overflow属性配合-webkit-line-clamp属性来实现。以下是一种常见的方式:

.text-container {overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2; /* 设置最大显示行数 */-webkit-box-orient: vertical;text-overflow: ellipsis;
}

在上面的示例中,.text-container 是包裹文本内容的容器元素的类名。通过设置 display: -webkit-box; -webkit-line-clamp: 2;,我们将容器元素设置为仅显示两行文本。当文本超过两行时,将隐藏溢出部分,并通过text-overflow: ellipsis;显示省略号。

请注意,-webkit-line-clamp 是一个非标准的CSS属性,仅在WebKit浏览器上有效。
如果需要兼容其他浏览器,可以考虑使用JavaScript或其他CSS技术来实现类似的效果。

http://www.lryc.cn/news/102766.html

相关文章:

  • 30-使用RocketMQ做削峰处理
  • 如何用非root账号安装k8s集群
  • windows环境安装elasticsearch+kibana并完成JAVA客户端查询
  • 高精度算法
  • DragGAN:用崭新的方式进行图像处理
  • 语音播放 linux
  • 各大互联网公司面经分享:Java 全栈知识 +1500 道大厂面试真题
  • 【LeetCode】剑指offer礼物的最大价值
  • 应用层协议——https
  • Emacs之实现鼠标/键盘选中即拷贝外界内容(一百二十)
  • 智慧城市环境污染数据采集远程监控方案4G工业路由器应用
  • 大数据技术之Clickhouse---入门篇---安装
  • vue3搭建Arco design UI框架
  • 提升数据质量的四大有效方式
  • ALLEGRO之FlowPlan
  • Python - OpenCV实现摄像头人脸识别(亲测版)
  • date日期相关操作汇总
  • 生产者-消费者模式
  • Jetson Nano之ROS入门 -- YOLO目标检测与定位
  • 【移动机器人运动规划】01 —— 常见地图基础 |图搜索基础
  • mongotop跟踪Mongodb集合读取和写入数据
  • Linux中使用du命令来查看目录的大小
  • 【Linux】进程篇Ⅰ:进程信息、进程状态、环境变量、进程地址空间
  • 保护 TDengine 查询性能——3.0 如何大幅降低乱序数据干扰?
  • 状态机实现N位按键消抖
  • uniapp自定义消息语音
  • k8s安装Jenkins
  • 共筑开源新长城 龙蜥社区走进开放原子校源行-清华大学站
  • Jgit 工具类 (代码检出、删除分支(本地、远程)、新建分支、切换分支、代码提交)
  • 什么是redux?如何在react 项目中使用redux?