实操中遇到的一些关于CSS的问题（持续更新）

记录一下使用中遇到的一些样式问题，方便自己后期查找，纯干货（为方便更新，序号从大到小记录）

图片位置相关

1、图片宽度过长水平居中

图片宽度过长，在不想压缩图片大小还想要居中的时候，使用relative定位

.img-div{
    background: red;
    height: 200px;
    width: 300px;
    line-height: 200px;
    .img{
        vertical-align: middle;
        // 图片原始尺寸
        width: 375px;
        height: 155px;
        // relative 定位，margin-left为宽度的一半
        position: relative;
        left: 50%;
        margin-left: -185px;
    }
}

效果如上图，不想显示超出的图片，则在div中是用overflow隐藏

2、图片等比缩放并水平垂直居中

.no-data{
    text-align: center;
    width: 100%;
    height: 100%;
    position: relative;
    .no-data-img{
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 100%;
        max-height: 100%;
    }
}

文字显示类相关

1、移动端p指定行数超出省略号的溢出问题

正常情况下单行指定宽度，超出省略号显示

width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本指定行数超出,省略号隐藏（两行为例）

overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
word-break: break-all;
display: -webkit-box;
-webkit-box-orient: vertical;
width: 90%;

但是这种情况下如果是多个div统一样式的时候，通常会赋值高度

height： 20px;

在个别手机上会出现溢出现象

此时，只要加一个line-height固定行间距就可搞定，多少行就多少倍

line-height: 10px; // 2行，总高20px

2、超长文本在div中垂直居中

短文本垂直居中直接使用line-height(基本都知道吧)

line-height： 10px;

但如果超长文本用这个会造成样式混乱

所以超长文文要在div和p标签直接再添加一层div，使div独立垂直于父div就可以，并且也不影响短文本的效果，所以若不确定文字长度，就可以使用这个方法进行居中

<div class="line-height">
    <div class="line-box">
        <P>短文本</p>
    </div>
</div>
<div class="line-height">
    <div class="line-box">
        <P>超长文本超长文本超长文本超长文本超长文本超长文本</p>
    </div>
</div>
.line-height{
    margin-bottom: 20px;
    background: #fff;
    width: 200px;
    height: 60px;
    line-height: 60px;
    .line-box{
        display: inline-block;  // 限制div的居中
        vertical-align: middle; // 限制div的居中
        background: red;
        line-height: 20px;
    }
}

注： flex布局下会失效，直接使用flex 的 align-items: center; 即可

3、文字间隔

有时候，按钮文字中间需要进行空格处理，使用&nbsp有时候达不到想要的效果，而且需要在每个按钮显示处都写一遍，太过麻烦。css中有一个lesser-spacing属性可以使用。使用的时候，会发现最后一个文字右侧有部分空隙，使用margin-left即可解决

.btn{
  letter-spacing: 20px;
  // 消除最后一部分间距
  &:after{
      content:'';
      margin-left: -20rpx;
  }
}