css 超出文字显示省略号
这里写自定义目录标题
- 单行省略号
- 多行省略号
单行省略号
直接上代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<p style="width: 100px;overflow: hidden; text-overflow:ellipsis; white-space: nowrap;">static:对象遵循常规流。top,right,bottom,left等属性不会被应用。relative: 对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left属性进行偏移时不影响常规流中的任何元素。absolute:对象脱离常规流,使用top,right,bottom,left等属性进行绝对定位,盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。fixed:对象脱离常规流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。center:对象脱离常规流,使用top,right,bottom,left等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。(CSS3)page:盒子的位置计算参照absolute。盒子在分页媒体或者区域块内,盒子的包含块始终是初始包含块,否则取决于每个absolute模式。(CSS3) sticky: 对象在常态时遵循常规流。它就像是 relative 和 fixed 的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。(CSS3)* CSS3新增属性可能存在描述错误及变更,仅供参考,持续更新</p>
</body>
</html>
实现方法:
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行省略号
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<p style="overflow : hidden;/*text-overflow: ellipsis;*/display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;width: 500px;
">static:对象遵循常规流。top,right,bottom,left等属性不会被应用。relative: 对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left属性进行偏移时不影响常规流中的任何元素。absolute:对象脱离常规流,使用top,right,bottom,left等属性进行绝对定位,盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。fixed:对象脱离常规流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。center:对象脱离常规流,使用top,right,bottom,left等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。(CSS3)page:盒子的位置计算参照absolute。盒子在分页媒体或者区域块内,盒子的包含块始终是初始包含块,否则取决于每个absolute模式。(CSS3) sticky: 对象在常态时遵循常规流。它就像是 relative 和 fixed 的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。(CSS3)* CSS3新增属性可能存在描述错误及变更,仅供参考,持续更新
</p>
</body>
</html>
实现方法:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
适用范围:
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;
注:
- webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
- display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
- webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
css 超出文字显示省略号相关推荐
- css超出隐藏显示省略号
width: 300px; overflow: hidden;/*超出部分隐藏*/ text-overflow:ellipsis;/* 超出部分显示省略号 */ white-space: nowrap ...
- css p 文本不换行,超出文字显示省略号
.text {// 文本强制不换行white-space: nowrap;// 文本溢出显示省略号text-overflow: ellipsis;// 溢出的部分隐藏overflow: hidden; ...
- 前端超出文字显示省略号
俩篇文章,360兼容模式.ie8可用(css) 原创: https://www.daqianduan.com/6179.html 实现方法: overflow: hidden; text-overfl ...
- CSS 超出部分显示省略号
文章目录 单行超出显示省略号 多行超出显示省略号 单行超出显示省略号 直接看代码: <!DOCTYPE html> <html lang="en"> < ...
- css超出文字用省略号表示
css代码 //css .name{width: 62px;display: inline-block; font-family: PingFangSC;color: #F7F6FD; white-s ...
- CSS超出部分显示省略号
height: 76rpx; width: 300rpx; display: -webkit-box; /*设置为弹性盒子*/ -webkit-line-clamp: 2; /*最多显示3行*/ ov ...
- css 超出隐藏显示省略号
以下三个需要配合使用: text-overflow: ellipsis; //字体超出用省略号显示 overflow:hidden; // 超出隐藏 white-space:nowrap // 不换行
- css超出两行显示省略号
display: -webkit-box;-webkit-line-clamp:2;overflow: hidden;text-overflow: ellipsis;-webkit-box-orien ...
- html 文字过多如何显示,当页面文字过多时,怎么用css使超出部分显示省略号?(单/多行代码演示)...
当一个页面文字过于冗长时,不仅不利于用户视觉上的感受,更不利于网站内的优化.那么我们怎么使用css超出部分显示省略号代替呢?本篇文章就给大家详细介绍css超出部分显示省略号怎么实现的?希望对有需要的朋 ...
最新文章
- 软件工程与软件测试基础知识_这是我在软件工程工作九个月中学到的知识
- CTFshow 信息收集 web6
- maven 整合支付宝,导入alipay-sdk-java包到本地仓库,远程仓库
- 2012 winter training @HIT Day 2 解题报告
- 《ASP.NET Core项目开发实战入门》送书活动结果公布
- 工作398-关于e.currentTarget.dataset的取值。
- linux 中断和进程 传递,Linux内核之进程上下文和中断上下文的区别
- 频率计的交流耦合和直流耦合的区别_直流电源与交流电源是什么?直流与交流之间的区别公司新闻...
- 基于 Direct3D 电子海图区域绘制方法
- SVN下载 1.11.0版本 win7 32位 安装文件及中文语言包
- 《出版专业基础(初级)》2020版学习笔记2~8章
- 使用Python face_recognition 人脸识别 - 12 人脸图片1-N比对
- Window底部任务栏点击没反应,桌面正常
- CVPR2021 最具创造力的那些工作成果!或许这就是计算机视觉的魅力!
- urdf 学习与制作
- mysql 存储数据类型的选择
- 系统安全漏洞及解决方案
- element ui textarea实现输入字数统计
- Objective-C 编程语言官网文档(一)-简介
- 经典例题:十六进制转换十进制详解 适合初学者