📋 个人简介
💖 作者简介:大家好,我是阿牛😜📝 个人主页:馆主阿牛🔥🎉 支持我:点赞👍+收藏⭐️+留言📝📣 系列专栏:css🍁💬格言:迄今所有人生都大写着失败,但不妨碍我继续向前!🔥上期传送门:
👉css中的选择器
👉css盒子模型及其实战案例(上)
👉css盒子模型及其实战案例(下)
👉css网页布局之浮动及其实战案例(超详细)
👉css中的定位详解
👉css中元素的显示与隐藏
👉我用css精灵图拼接了自己的英文名字,不会还有人不知道精灵图技术吧
👉css三角的做法及其案例
👉css布局技巧-css三角巧妙运用
👉css布局技巧-文字围绕浮动元素巧妙运用
👉css布局技巧-margin负值巧妙运用
👉css布局技巧-行内块元素的巧妙运用
👉css中 vertical-align 属性的应用和案例
目录
📋 个人简介单行文字溢出省略号显示(重要)多行文字溢出省略号显示(了解)单行文字溢出省略号显示(重要)
单行文本溢出显示省略号必须满足三个条件:
/* 1.先强制一行内显示文本*/white-space : nowrap ; /*(默认 normal 自动换行)*//* 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>Document</title><style>div{width: 150px;height: 80px;background-color: skyblue;margin: 100 auto;/* 1.先强制一行内显示文本*/white-space : nowrap ; /*(默认 normal 自动换行)*//* 2.超出的部分隐藏*/overflow : hidden ;/* 3.文字用省略号替代超出的部分 */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: 45px;background-color: skyblue;margin: 100 auto;overflow : hidden ;text-overflow : ellipsis ;/*弹性伸缩盒子模型显示*/display :-webkit-box ;/*限制在一个块元素显示的文本的行数,即在第几行显示省略号*/-webkit-line-clamp :2;/*设置或检素伸缩盒对象的了元素的排列方式*/-webkit-box-orient : vertical ; }</style></head><body><div>阿牛是世界上最好最帅的人,啊啊啊啊啊啊啊啊啊啊啊啊</div></body></html>