html 文字过多如何显示,当页面文字过多时,怎么用css使超出部分显示省略号?(单/多行代码演示)...
当一个页面文字过于冗长时,不仅不利于用户视觉上的感受,更不利于网站内的优化。那么我们怎么使用css超出部分显示省略号代替呢?本篇文章就给大家详细介绍css超出部分显示省略号怎么实现的?希望对有需要的朋友有所帮助!
css超出部分显示省略号具体示例代码如下:
css超出部分省略显示测试
.app {
width: 400px;
height: 28px;
line-height: 28px;
margin: 50px 0 0 50px;
border: 1px solid red;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
php中文网(php.cn)提供大量免费、原创、高清的php视频教程,在学习的时候可以直接在线修改示例,查看php执行效果是本站的一大特色,php从入门到精通,一站式php自学平台。
效果如下图:
注:以上是实现单行文本的溢出显示省略号用text-overflow:ellipsis属性,还需要加宽度width属来兼容部分浏览。
那么单行知道如何操作,多行就简单了。多行的实现方法主要是以下代码:display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;
css超出省略部分兼容适用范围:
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;
注:
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
html 文字过多如何显示,当页面文字过多时,怎么用css使超出部分显示省略号?(单/多行代码演示)...相关推荐
- css实现超出部分显示省略号
css实现超出部分显示省略号 显示一行,省略号 width:200px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; ...
- CSS 文本超出溢出显示省略号...
源码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...
- CSS 文本超出两行显示省略号
// 文本超出两行显示省略号 注:如果设置了 弹性布局 display:flex; 那么下面的的css设置将不起作用div {width: 300px; overflow:hidden;text-ov ...
- css文本超出部分用省略号显示
1. 单行文字省略 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- css文本超出隐藏 显示三个点
文本超出显示三个点一般分两种情况 一,单行文本超出隐藏 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 二,多行文本超出隐藏 ...
- css 文本超出隐藏显示省略号
1.大部分浏览器这个就可以解决 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...
- 使用css使div居中显示
本例以vue为例,使用text-align: center 和margin:0 auto;实现div居中显示 1.html代码 <template> <div class=&qu ...
- css样式超出隐藏显示...
overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: normal !important; -w ...
- html 文字超出部分,CSS控制文字超出部分显示省略号方法
我们经常会看到有些网站比较长的字符就会显示省略号了,实现这种效果有两个办法,一种利用程序截取字符,另一种利用css实现超出部分显示省略号,下面我来介绍第二种. 测试浏览器: IE6/7/8/9.ope ...
最新文章
- sont表示元素在存入集合时进行了排序,数据遍历的结果是按某个排序规则输出的
- [云炬创业管理笔记]第一章测试2
- cannot be resolved or is not a field
- php试题及答案 博客,转php面试题及我的答案(一)
- 从医疗数字化转型谈何为中台
- Git创建版本库和添加文件
- 乐安全 支持x86_android-x86-4.4-r2运行程序总是停止运行怎么处理
- Linux下conda常用命令整理
- 互联网日报 | 8月3日 星期二 | 陌陌宣布更名为“Hello”集团;国家电网升至世界500强第二位;比亚迪总市值超8300亿...
- 夺旗赛 CTF 六大方向基础工具简介集合(MISC,WEB,Crypto,Reverse,Pwn,Mobile)
- 新颖的自我介绍_有创意的自我介绍模板(精选6篇)
- html数据如何分页显示,简单的html数据分页控件封装
- 诺基亚 8208支持java么_诺基亚8_诺基亚8208怎么上网_8208 诺基亚
- rtspplayer播放器实现
- 基于三轴加速度传感器的老人摔倒检测
- sqlserver 当 IDENTITY_INSERT 设置为 OFF 时,不能为表 'test' 中的标识列插入显式值...
- 日期转换 NSDate 格式 格林尼治时间 时差
- 计算机基础知识精品课程,校级精品课程《大学计算机基础》简介
- 游戏产业链:游戏引擎
- 监控摄像头的测试方法