JXL组件：基于Vue生态编写jxl-ellipsis文本省略

JxlEllipsis 文本省略

解决内容超出理想区域，破坏页面排版的难题。

基于 CSS Style 实现限制文本多行显示，超出则省略隐藏的功能。

<template>
  <div class="text-ellipsis" :style="{ '-webkit-line-clamp': line }">{{ text }}</div>
</template>

<script>
export default {
  name: 'JxlEllipsis',
  props: {
    /**
     * 需要显示的文本
     */
    text: {
      type: String,
      default: ''
    },
    /**
     * 需要限制的文本行数
     */
    line: {
      type: Number,
      default: 1
    }
  }
}
</script>

<style lang="less" scoped>
.text-ellipsis {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>

JxlEllipsis 属性（Attributes）