常用的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>

本文转自网络，版权归原作者所有，原文链接：https://segmentfault.com/a/1190000040445828
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！