目录
1. vertical-align属性
1.1 图片、表单和文字对齐
1.2 解决图片底部默认空白缝隙问题
2. 溢出文字省略号显示
2.1 单行文本溢出显示省略号(重要)
2.2 多行文本溢出省略号显示(了解)
1. vertical-align属性
vertical-align属性应用场景:经常用于设置图片或者表单(行内元素)和文字垂直对齐
官方解释:用于设置一个元素的垂直对齐方式,但是它只针对行内元素或者行内块元素有效
语法:
vertical-align: baseline| top| middle| bottom;
实际开发中最常用的是middle居中对齐
只要是行内块元素就可以添加这个属性
1.1 图片、表单和文字对齐
它们都是属于行内块元素,默认的vertical-align是基线对齐,只要给它们设置vertical-align属性设置为middle,就可以让文字和图片垂直居中
1.2 解决图片底部默认空白缝隙问题
bug:图片底部侧会有一个空白缝隙,因为是行内块元素会和文字的基线对齐。
主要解决方法有两种:
给图片添加vertical-align: middle| top|bottom等。(提倡使用)给图片转为块级元素 display:block;
2. 溢出文字省略号显示
2.1 单行文本溢出显示省略号(重要)
必须满足三个条件:
1、强制一行内显示文本
white-space: nowrap;(normal默认自动换行)
2、超出部分隐藏
overflow: hidden;
3、文字用省略号代替超出的部分
text-overflow: ellipsis;
2.2 多行文本溢出省略号显示(了解)
多行文本溢出显示省略号,有较大的兼容性问题,适合webkit浏览器或者移动端(移动端大部分是webkit内核)
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块级元素显示文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
更建议让后台人员做这个效果,因为后台人员可以设置显示多少个字,操作更加简单
如果觉得《CSS进阶:vertical-align垂直居中对齐 溢出的文字省略(网页常用)》对你有帮助,请点赞、收藏,并留下你的观点哦!