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>