CSS+JS+Vue：单行、多行文本溢出显示省略号...的几种实现方式

背景：近期H5项目有个UI需求，单行文本超长时，超出的部分...省略且有一个查看的图标；否则正常展示。

在此背景下了总结下文本溢出的几种实现方式。

1、单行文本溢出【纯css】

效果：

一些随机文字，一二三四五六七八九十。超长测试文本1234567890。


.text-ellipsis {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2、多行文本溢出【纯css】

效果：

一些随机文字，一二三四五六七八九十。超长测试文本1234567890。


.text-ellipsis-two {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

看效果已实现，但略一思索-webkit-前缀，怕不是有兼容性问题。如你所想，它有。需要兼容IE的童鞋，请彻底放弃这种写法，具体参见caniuse。

单纯的依靠CSS想要定制多行文本溢出展示有难度，有没有封装好的组件直接用，于是就有了第三种实现方式。

3、HeyUI组件库：TextEllipsis 超出文本省略

效果：

  




  
  收起



txt1: '一些随机文字，一二三四五六七八九十。超长测试文本1234567890。',
isLimitH: true

例一即可实现方式二中的效果。

例二中自定义更多，文本超长时，溢出部分...省略，且展示查看更多按钮；点击查看更多，超长文本全部展示且有收起按钮，点击收起按钮，回到...状态。文本未超长时，正常展示。

挑战部分，Vue项目怎么写一个类似组件？来往下看，方式四来了。

4、仿HeyUI的TextEllipsis组件【Vue+CSS+JS】

效果：

// 父组件


  



  



  
  收起



import textE from './textellipsisComponent'
export default {
  components: {textE},
  data () {
    return {
      isLimitHeight: true,
      txt1: '一些随机文字，一二三四五六七八九十。超长测试文本1234567890。',
      txt2: '111'
    }
  }
}

// 子组件 textellipsisComponent.vue

核心逻辑是：计算节点的scrollHeight和预期高度height进行比较，做相应处理。

5、跟着element-ui实现单行文本溢出【Vue+CSS+JS】

table中单元格有个show-overflow-tooltip属性，作用是当内容过长被隐藏时显示 tooltip。此组件仅支持单行文本，且超出部分省略仅支持...，不支持自定义。

效果：

// 父组件





import tooltips from './tooltips'
export default {
  components: {tooltips},
  data () {
    return {
      txt1: '一些随机文字，一二三四五六七八九十。超长测试文本1234567890。',
      txt2: '111'
    }
  }
}

// 子组件 tooltips.vue

The end