css常用片段

收集几个自己常用但记不住的css片段。

css中文英文换行、禁止换行、显示省略号

word-break:break-all;只对英文起作用，以字母作为换行依据
word-wrap:break-word; 只对英文起作用，以单词作为换行依据
white-space:pre-wrap; 只对中文起作用，强制换行
white-space:nowrap; 强制不换行，都起作用
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现

多行省略（MacOS上，火狐，谷歌，Edge，safari测试通过）

.content{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

css超过三行就隐藏成省略号

.esptext{
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor:pointer;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

}
.esptext:hover{
    color:#00A3A6;
    transition: 0.8s;
}

持续更新…