css之单行文字溢出省略号显示

单行文本溢出显示省略号——必须满足三条件

//1.强制一行内显示文本
white-space：nowrap;(默认自动换行)
//2.超出部分隐藏
overflow：hidden;
//3.文字用省略号代替超出部分
text-overflow：ellipsis；

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>单行文字溢出省略号显示</title><style>div {width: 150px;height: 80px;background-color: pink;margin: 100px auto;/* normal：文字显示不开自动换行 *//* white-space: normal; *//* nowrap：文字显示不开也强制一行内显示 */white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}</style>
</head><body><div>我是世界上最美丽最善良的小宝宝此处省略一万字</div></body></html>

多行文本溢出显示省略号
多行文本溢出显示省略号，有兼容性问题，适用于webKit浏览器或移动端（大部分时webKit内核）

overflow: hidden;text-overflow: ellipsis;/* 弹性伸缩盒子模型显示 */display: -webkit-box;/* 限制在一个块元素显示的文本的行数 */-webkit-line-clamp: 2;/* 设置或检索伸缩盒对象的子元素的排列方式 */-webkit-box-orient: vertical;

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 150px;height: 80px;background-color: pink;margin: 100px auto;overflow: hidden;text-overflow: ellipsis;/* 弹性伸缩盒子模型显示 */display: -webkit-box;/* 限制在一个块元素显示的文本的行数 */-webkit-line-clamp: 2;/* 设置或检索伸缩盒对象的子元素的排列方式 */-webkit-box-orient: vertical;}</style>
</head><body><div>我是超级无尽美少女偶也欧布波u预防和环境设计符合双方</div>
</body></html>

css之单行文字溢出省略号显示相关推荐

css多行文字溢出省略号显示
<style>div{width: 150px;height: 80px;background-color: pink;margin: 100px auto;/* 2.overflow:h ...
css文字溢出省略号显示
单行文字溢出省略号显示步骤: 1.强制文字一行显示 white-space: nowrap; 2.溢出部分隐藏起来 overflow: hidden: 3.文字溢出的时候用省略号显示 text-ov ...
单行文字溢出隐藏显示省略号
单行文字溢出隐藏显示省略号 1. 让换行的文字强制在一行显示.属性 white-space: nowrap; 2. 溢出的部分隐藏.overflow: hidden: 3. 文字溢出显示用省略号. t ...
css多行文本溢出省略号显示
一.通过css来定义行数 .contents {width: 200px; // 定义宽度border: 3px solid #eee;overflow: hidden;text-overflow: ...
css 每个样式单行显示,单行文字溢出和多行文字溢出省略号显示的CSS样式
<JavaScript高级程序设计>读书笔记--(3)引用类型 ECMAScript从技术来说是一门面向对象的语言,但不具备传统的面向对象语言所支持的类和接口等基本结构.虽然引用类型与类看 ...
css设置文字溢出省略号显示
li 字多出了省略号_文字溢出自动显示省略号css方法 -
文字样式(Text Style)是一组可随图形保存的文字设置的集合,这些设置可包括字体设置以及特殊效果等.文字样式在不同的软件环境下显示的方式也会不一样.下面就来分享一下html中如何让文字竖排?总结 ...
li 字多出了省略号_文字溢出自动显示省略号css方法
这次给大家带来文字溢出自动显示省略号css方法,文字溢出自动显示省略号css的注意事项有哪些,下面就是实战案例,一起来看一下. 我们经常会遇到文字太多,而为了不打破原有布局,需要将多出文字用省略号代替 ...
13 【精灵图图标字体 CSS三角鼠标样式溢出省略号】
20.精灵图 20.1为什么需要精灵图? 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度. ...

css之单行文字溢出省略号显示

css之单行文字溢出省略号显示相关推荐

最新文章

热门文章