css 常用的css小技巧

1.解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

.wrap {
  display: inline-block;
  overflow: hidden
    vertical-align: bottom
}

2.超出部分显示省略号

// 单行文本 .wrap { 
                  overflow:hidden;/*超出部分隐藏*/
                  text-overflow:ellipsis;/*超出部分显示省略号*/
                  white-space:nowrap;/*规定段落中的文本不进行换行 */ 
                 }

// 多行文本 .wrap {
                   100%; overflow: hidden; 
                  display: -webkit-box; 
                                                                                                                                                                            //将对象作为弹性伸缩盒子模型显示 *必须结合的属性* -webkit-box-orient: vertical; //设置伸缩                盒对象的子元素的排列方式 *必须结合的属性* -webkit-line-clamp: 3; //用来限制在一个块元素中显示的文本的行数 word-break: break-all; //让浏览器实现在任意位置的换行 *break-all为允许在单词内换行* }

作者：Rashomon
链接：https://juejin.im/post/5da3a357f265da5b6723ee1e
来源：掘金