关于css:常用的css代码片段收集

css文字过长，显示省略号

单行文本

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; // 设置须要显示的行数
overflow: hidden;

应用flex布局实现css超出滑动，代码很简洁

.list{
    display: flex;
    overflow-x: auto;
}

.item{
    flex-shrink: 0;
}

<div class="list">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
</div>