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; 文本溢出隐藏

相关推荐
JavaAgent架构师8 小时前
前端AI工程化(一):AI通信协议深度解析
前端·人工智能
林恒smileZAZ8 小时前
前端如何让图片、视频、pdf等文件在浏览器直接下载而非预览
前端·pdf
孙6903428 小时前
electron播放本地任意格式的视频
前端·javascript
小小小小宇8 小时前
设计稿转代码:如何将生成代码与内部组件库关联
前端
七牛云行业应用8 小时前
别每个 AI 工具单独配了!MCP 一次搭建,Claude、Cursor、TRAE 全能用
前端
_xaboy8 小时前
FormCreate 设计器 v6.3 正式发布:AI 表单助理3.0登场!
前端·vue.js·低代码·开源·表单设计器
胡志辉8 小时前
邮件中点击“加载图片”,你的IP地址已经被泄漏
前端·后端·安全
openKaka_9 小时前
reconcileChildren 深入:React 如何根据 ReactElement 构建子 Fiber
前端·javascript·react.js
三翼鸟数字化技术团队9 小时前
事件循环原来这么简单!
前端
gf13211119 小时前
python_【更新已发送的消息卡片】
java·前端·python