文本溢出处理方法

单行超出省略

单行超出时，可以通过设置宽度来实现省略效果。常用的CSS属性包括：

这些属性会阻止文本换行，并在超出部分显示省略号。

多行省略

当需要多行内容省略时，可以使用以下方法：

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

此方法允许文本在指定行数内断开显示，并在断开处显示省略号。需要注意的是，-webkit-line-clamp属性仅在Webkit浏览器中支持。

上一篇：前端入门经验——v-for动态绑定图片样式

下一篇：前端入门经验——tab切换

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

推荐文章

Numpy 如何操作数组 2019-03-05

爬取网易科技滚动新闻 2019-03-05

vuex modules 2019-03-05

Java笔记：单链表 2019-03-05

Java基础题：小根堆为8,15,10,21,34,16,12，删除关键字8之后需重建堆，需要的比较次数为？ 2019-03-05

phthon基本语法——温习 2019-03-05

sleep、wait、yield、join——简介 2019-03-05

web项目配置 2019-03-05

VTK：Medical之MedicalDemo2 2019-03-05

c语言(基本数据类型)实参与形参传值用汇编理解 2019-03-05

基于单片机可控音乐流水灯控制设计-全套资料 2019-03-05

基于单片机简易信号误差分析设计-全套资料 2019-03-05

基于单片机简易脉搏测量仪系统设计-毕设课设资料 2019-03-05

并发框架下的“基础类型”——浅析基本类型、ThreadLocal、原子类的线程安全机制 2019-03-05

VHDL代码风格 2019-03-05

图像处理系列1.skimage 2019-03-05

Object Clone 2019-03-05

Javascript中String支持使用正则表达式的四种方法 2019-03-05

2021年判断浏览器最新写法，你都掌握了吗？ 2019-03-05

【IoT】蓝牙BLE基础：CC254x通信系列之模拟SPI协议 2019-03-05

白红宇的个人博客 - 记录点点滴滴的事 - 您是第 457303140 位访客