CSS 文字溢出:多行溢出、一行溢出

CSS 文字溢出:多行溢出、一行溢出

案例请点击查看文章详情。


代码如下:

  • 多行溢出设置

    css 复制代码
    .line-clamp-2{
    	/* height: 52px;
    	line-height: 25px; */
    	overflow: hidden;
    	word-break: break-all;
    	text-overflow: ellipsis;
    	display: -webkit-box;
    	-webkit-line-clamp: 2;
    	-webkit-box-orient: vertical;
    }
  • 单行溢出设置

    css 复制代码
    line-height: 25px;
    overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容)
    white-space: nowrap;(设置文字在一行显示,不能换行)
    text-overflow: ellipsis;(规定当文本溢出时,显示省略符号来代表被修剪的文本)

    text-overflow: ellipsis; 文本溢出隐藏

相关推荐
我是真菜12 小时前
彻底理解js中的深浅拷贝
前端·javascript
江畔柳前堤13 小时前
github实战指南07-CLI 与高级技巧
前端·人工智能·chrome·深度学习·github·caffe·issue
kisdiem13 小时前
ReAct:让大模型一边推理,一边行动
前端·react.js·前端框架
西部荒野子13 小时前
JS 如何跑进两个原生世界
前端
RANxy13 小时前
AntV 入门系列第一篇:从零开始的数据可视化之旅
前端
小小小小宇14 小时前
前端 WebRTC 全解析与应用
前端
华玥14 小时前
优化滚动列表,使用虚拟滚动
前端
小小小小宇14 小时前
前端 WebAssembly 全解析与应用
前端
huangdong_14 小时前
京东商品图片视频批量下载与m3u8视频合并技术完整实现方案
大数据·前端·数据库
尽兴-14 小时前
4.1 智能体核心:Agent、Sub-Agent、ReAct、规划执行
前端·javascript·react.js·agent·react·subagent