文本截断

通过CSS可以轻松将HTML元素内的文本截断并显示省略号。为了进一步简化这一操作，您可以使用@abp/ng.theme.shared包提供的EllipsisDirective指令。

快速入门

要在HTML模板中使用EllipsisDirective，需要先在组件中导入该指令。该指令的选择器为**abpEllipsis**。通过向HTML元素添加abpEllipsis属性，即可为该元素激活EllipsisDirective功能。

// ...
import { EllipsisDirective } from '@abp/ng.theme.shared';

@Component({
  //...
  imports: [EllipsisDirective],
  template: `
    <p abpEllipsis>
      这是一段非常长的文本内容，Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam commodi quae aspernatur,
      corporis velit et suscipit id consequuntur amet minima expedita cum reiciendis dolorum
      cupiditate? Voluptas eaque voluptatum odio deleniti quo vel illum nemo accusamus nulla ratione
      impedit dolorum expedita necessitatibus fugiat ullam beatae, optio eum cupiditate ducimus
      architecto.
    </p>
  `
})
export class SampleComponent {}

通过向包含长文本的<p>元素添加abpEllipsis属性，成功激活了EllipsisDirective功能。

效果展示：

可以看到长文本已通过指令实现截断处理。

使用指令前的界面效果：

指定HTML元素最大宽度

可按如下方式指定HTML元素的最大宽度：

<div [abpEllipsis]="'100px'">
 这是一段示例文本，Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, optio!
</div>

<div [abpEllipsis]="'15vw'">
 这是一段示例文本，Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, optio!
</div>

<div [abpEllipsis]="'50%'">
 这是一段示例文本，Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, optio!
</div>

效果展示：