1.显示省略号

（1）单行文本的溢出显示省略号

实现方法(需要加宽度width属来兼容部分浏览)：

overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行

（2）多行文本的溢出显示省略号

实现方法

display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示

适用范围: 因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端

（3）js实现多行文本显示省略号

使用字符串放发substring截取指定范围内的字符串，然后拼接...

substr (str) {
  if (str.length > 8) {
     return str.substring(0, 8) + '...'
  }
  return str
}

2.实现横向滚动

html基本结构（a标签可以再次进行嵌套div或其它）

<div class="nav-wrap">
    <a>全部</a>
    <a>Adobe</a>
    <a>微软</a>
    <a>会计</a>
    <a>绘画</a>
    <a>微软</a>
    <a>绘画</a>
    <a>计算机</a>
    <a>前端工程师</a>
</div>

css书写（采用less）

.nav-wrap {
  .nav-tab{
    margin-top: 15px;
    padding: 2px 6px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: scroll;
    overflow-y: hidden;
    //方法一：隐藏滚动条
    &::-webkit-scrollbar{
       background-color:transparent;
    }
    a{
        font-size: 18px;
        border: 1px solid #666;
        padding: 5px 8px;
        margin-right: 5px;
        border-radius: 12px;
        line-height: 18px;
        white-space: nowrap;
    }
  }
}
//方法二：隐藏滚动条
// ::-webkit-scrollbar{ // 直接复制黏贴到样式页.css，完美解决
//   display: none;
//   /* background-color:transparent; */
// }

3. 文字翻滚效果（vue）

<template>
  <div class="scroll-wrap">
      <ul class="scroll-list" :class="{'animate-up': animateUp}">
          <li v-for="(item, index) in scrollListData" :key="index">
              {{item}}
          </li>
      </ul>
  </div>
</template>

<script>
// 文字上线翻滚
export default {
  name: 'scrollDemo',
  components: {},
  data () {
    return {
      // 翻滚的数据源
      scrollListData: ['12***ve 成功邀请12人 已获奖金60元', 'l***e 成功邀请5人 已获奖金40元', 'l***e 成功邀请1人 已获奖金5元'],
      // 是否添加翻滚的动画效果
      animateUp: false,
      // 定时器
      timer: null
    }
  },
  computed: {},
  watch: {},
  methods: {
    // 开启翻滚动画，添加延时定时器
    scrollAnimate () {
      this.animateUp = true
      // 0.5秒执行延时定时器中的回调
      setTimeout(() => {
        // 向数组中追加索引值为0的元素
        this.scrollListData.push(this.scrollListData[0])
        // 删除数组中的第一项
        this.scrollListData.shift()
        this.animateUp = false
      }, 500)
    }
  },
  mounted () {
    // 开启定时器，scrollAnimate（每1.5秒执行一次）
    this.timer = setInterval(this.scrollAnimate, 1500)
  },
  destroyed () {
    // 清除定时器
    clearInterval(this.timer)
  }
}
</script>

<style lang='less' scoped>
.scroll-wrap {
  width: 80%;
  height: 40px;
  border-radius: 20px;
  background: skyblue;
  margin: 0 auto;
  overflow: hidden;
  .scroll-list {
    margin: 0;
    padding: 0;
    li {
      height: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      padding: 0 20px;
      list-style: none;
      line-height: 40px;
      text-align: center;
      color: #fff;
      font-size: 18px;
      font-weight: 400;
    }
  }
  // 样式翻滚动画，40px为li的高度
  .animate-up {
    transition: all .5s ease-in-out;
    transform: translateY(-40px);
  }
}
</style>