vue-ellipsis-component

高性能、可自定义的 vue 文本缩略组件。支持自定义缩略符、尾文本过滤、富文本缩略等功能。

快速开始 →

良好的兼容性、优秀的性能

根据浏览器的情况选择不同的缩略方案,在缩略文本上采用二分查找法进行性能优化

纯文本、富文本缩略

支持文本缩略的同时也支持将传入文本作为 HTML 进行缩略

自定义缩略符

支持自定义的纯文本缩略符,也支持使用 slot 传入 HTML 格式的缩略符

# 示例

点击显示/隐藏示例
....
<template>
  <div class="wrapper">
    <vue-ellipsis
      :visible-line="1"
      text="这是一段非常非常非常非常非常非常非常长的话"
      ellipsis-node="...."
      reflowOnResize>
    </vue-ellipsis>
  </div>
</template>

<style scoped>
.wrapper {
  padding: 10px 12px;
  width: 300px;
  resize: horizontal;
  border-radius: 4px;
  background-color: #eee;
  overflow: hidden;
}
</style>