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

迈不过友情╰ 2022-10-01 06:44 198阅读 0赞

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

### 3、图片宽度过长水平居中 ###

图片宽度过长，在不想压缩图片大小还想要居中的时候，使用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、移动端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
    复制代码

### 1、超长文本在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;
        }
    }
    复制代码

转载于:https://juejin.im/post/5ce6466de51d45773d468580