溢出的文字省略号显示
一行文本溢出并显示 …
// 1. 先强制一行内显示文本
white-space: nowrap;
// 2. 超出的部分隐藏
overflow: hidden;
// 3. 文字用省略号替代超出的部分
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
多行文本溢出显示点点点
overflow: hidden;
text-overflow: ellipsis;
// 弹性伸缩盒子模型显示
display: -webkit-box;
// 限制在一个块元素显示的文本的行数
-webkit-line-clamp: 2;
// 设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient: vertical;
overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
或者
overflow: hidden;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;
-webkit-box-orient: vertical 属性编译后丢失问题详解
解决方案:
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;
参考链接:https://blog.csdn.net/weixin_41544124/article/details/92646582
溢出的文字省略号显示相关推荐
- CSS基础(part18)--溢出的文字省略号显示
学习笔记,仅供参考,有错必纠 参考自:pink老师课堂笔记 文章目录 溢出的文字省略号显示 white-space text-overflow 溢出的文字省略号显示三部曲 举个例子 溢出的文字省略号显 ...
- 十、CSS三行代码实现 溢出的文字省略号显示(white-space: nowrap;overflow: hidden;text-overflow: ellipsis;)
4. 溢出的文字省略号显示 4.1 white-space white-space设置或检索对象内文本显示方式.通常我们使用于强制一行显示内容 white-space:normal :默认处理方式wh ...
- 【web前端】CSS高级技巧(精灵图,字体图标,CSS三角,CSS用户界面样式,文字与图片垂直对齐,溢出的文字省略号显示,常见布局技巧,CSS初始化)
使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录 一.精灵图 1.为什么需要精灵图 2.精灵图( sprit ...
- CSS系列之溢出的文字省略号显示
文章の目录 1.white-space 1.1.属性值 2.text-overflow 2.1.属性值 3.三部曲 写在最后 1.white-space white-space 是用来设置如何处理元素 ...
- CSS溢出的文字省略号显示
目录 1.单行文本溢出显示省略号--必须满足三个条件 2.多行文本溢出显示省略号 1.单行文本溢出显示省略号–必须满足三个条件 /* 1.先强制一行内显示文本 */white-space: nowra ...
- 前端笔记(9)元素的隐藏与显示,css用户界面样式,vertical-align垂直对齐,溢出文字省略号显示,css精灵技术,过渡,焦点,滑动门,margin负值
css样式表/层叠样式表(7) 元素的隐藏与显示 (1)dispaly显示 (2)visibility可见性 (3)overflow溢出 css用户界面样式 鼠标样式cursor 轮廓线outline ...
- CSS常用技巧(元素显示隐藏、用户界面样式、垂直对齐、溢出文字省略号显示、精灵技术、滑动门、margin负值之美和css三角之美)
CSS常用技巧 CSS常用技巧(元素显示隐藏.用户界面样式.垂直对齐.溢出文字省略号显示.精灵技术.滑动门.margin负值之美和css三角之美) 1.元素显示隐藏 1.1display 显示(重点) ...
- 多行溢出文字省略号显示(HTML、CSS)
多行溢出文字省略号显示(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta cha ...
- 单行溢出文字省略号显示(HTML、CSS)
单行溢出文字省略号显示(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta cha ...
最新文章
- pycharm 运行控制台中文乱码解决办法
- Mac系统兼容软件 CrossOver 试用到期了怎么办
- 设计模式 — 行为型模式 — 观察者模式
- python爬虫多久能学会-不踩坑的Python爬虫:如何在一个月内学会爬取大规模数据...
- 生活中的一些感悟与记录
- linux笔记-硬链接和符号链接
- 7-1 ATM机类结构设计(一) (100 分)
- bzoj3173: [Tjoi2013]最长上升子序列(fhqtreap)
- C# 之 MouseHook(鼠标钩子)使用
- c语言串口通信实验报告,单片机实验报告-串口实验
- leaflet地图原理_Leaflet地图框架使用手册
- android toast通知关闭,Android Toast通知用法实例详解
- css写字体浮雕效果,使用CSS3的text-shadow制作浮雕文字阴影和多重文字阴影效果-网站程序网...
- Latex/overleaf表格旋转、表格高度宽度、表格行间距设置
- C/C++描述 - 矩阵乘积的计算
- 那堪春景媚,送君千万里
- 指针,指针变量,指针变量指向的一些理解
- oracle 的三个主要内存结构SGA,PGA,UGA
- GB2312编码表(全)-Java程序打印
- Charles抓取浏览器https包