Modify scroll bar style and text overflow to hide ellipses

 renderings

 

html part

  <div class="down">
        <ul>
          <li
            v-for="(item, index) in searchList"
            :key="index"
            @click.stop="handleSearchList(item)"
          >
            {
   
   { item }}
          </li>
          <li v-show="searchResult" style="text-align: center">暂无搜索结果</li>
        </ul>
      </div>

css part

.down {
  ul {
    width: 298px;
    max-height: 100px;
    overflow-y: scroll;
    margin: 0;
    padding: 0 12px;
    list-style: none;
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      background: #1890ff;
      box-shadow: inset 0 0 5px rgb(59, 193, 230);
    }
    //滚动条底层颜色!
    &::-webkit-scrollbar-track {
      border-radius: 10px;
      background: #ededed;

      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    }

    li {
      overflow: hidden; // 溢出隐藏
      white-space: nowrap; // 强制一行
      text-overflow: ellipsis; // 文字溢出显示省略号
      cursor: pointer;
      &:hover {
        color: rgb(0, 81, 255);
      }
    }
  }
}