css 的三个技巧

1 图片等比例缩小

.imgBox {
    width: 100px;
    height: 100px;
}
.imgBox img {
    width: 100%;
    height: auto;
}

2 多行文本省略

// 单行
.text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
//多行
.text {
    overflow: hidden;
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

关于display: -webkit-box 的讲解: https://www.cnblogs.com/frankwong/p/4603141.html

3 强制性换行

// 一般元素默认是white-space:normal; 自动换行
// 但是如果是一些没有空格的数字，字符，字母的话white-space:normal;是不会进行换行的，而是会把父元 // 素撑开，这时候就要使用word-break来进行换行
word-break:break-all; // 会把结尾单次截断换行
word-wrap:break-word; // 结尾单次不截断，整个换行

4 not 伪类

.list .item:not(:last-child) {
    background: red;
}

5 box-decoration-break   元素断行显示的形式