css 实现移动端横向滚动条隐藏但还可以滚动的效果与实现多行文本溢出显示省略号

一、实现移动端横向滚动条隐藏但还可以滚动的效果

1、首先添加一段html代码：

<div class="scroll">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">X</div>
      <div class="item">XI</div>
</div>

在没有样式情况下这段代码显示效果如下：

2、给 item 类添加样式：

 .item {
        width: 100px;
        height: 50px;
        background-color: aqua;
        border-right: 1px solid;
        white-space: nowrap;
        display: inline-block;
      }

运行结果：

3、给 scroll 类 添加样式支持滚动

.scroll {
        text-align: center;
        white-space: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
      }

运行结果：

4、去掉滚动条还可以滚动的实现

.scroll::-webkit-scrollbar {display:none}

参考来源：css实现横向滚动 - 掘金 (juejin.cn)

二、实现多行文本溢出显示省略号

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
 /*控制在3行*/
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;