【文本省略】应用示例

<text-ellipsis/> 组件文档

基础使用

头部省略

中部省略

尾部省略

自定义省略号

多行文本省略

组件描述

<template>
<div>
  <bst-module>
    <div style="display:inline-block;margin-right:8px;">
      <h4>头部省略</h4>
      <div style="width: 120px;border:1px solid gray;margin-top: 8px;">
        <bst-text-ellipsis content="床前看月光，疑是地上霜。举头望山月，低头思故乡。" position="start"/>
      </div>
    </div>
    <div style="display:inline-block;margin-right:8px;">
      <h4>中部省略</h4>
      <div style="width: 120px;border:1px solid gray;margin-top: 8px;">
        <bst-text-ellipsis content="床前看月光，疑是地上霜。举头望山月，低头思故乡。" position="center"/>
      </div>
    </div>
    <div style="display:inline-block;margin-right:8px;">
      <h4>尾部省略</h4>
      <div style="width: 120px;border:1px solid gray;">
        <bst-text-ellipsis content="床前看月光，疑是地上霜。举头望山月，低头思故乡。"/>
      </div>
    </div>
    <div style="display:inline-block;margin-right:8px;">
      <h4>自定义省略号</h4>
      <div style="width: 120px;border:1px solid gray;">
        <bst-text-ellipsis content="床前看月光，疑是地上霜。举头望山月，低头思故乡。" dots="---"/>
      </div>
    </div>
    <div style="display:inline-block;margin-right:8px;vertical-align: top;">
      <h4>多行文本省略</h4>
      <div style="width: 120px;border:1px solid gray;">
        <bst-text-ellipsis :rows="2" content="床前看月光，疑是地上霜。举头望山月，低头思故乡。床前看月光，疑是地上霜。"/>
      </div>
      <div style="width: 120px;border:1px solid gray;margin-top: 8px;">
        <bst-text-ellipsis :rows="3" content="床前看月光，疑是地上霜。举头望山月，低头思故乡。"/>
      </div>
    </div>
  </bst-module>
</div>
</template>

显示代码

编辑此文档 (opens new window)