1. @b-design/ui-truncate
React component for Alibaba Cloud.
@b-design/ui-truncate
Package: @b-design/ui-truncate
Last modified: Mon, 21 Aug 2023 05:08:46 GMT
Version: 0.0.1
License: MIT
Downloads: 6

Install

npm install @b-design/ui-truncate
yarn add @b-design/ui-truncate

@b-design/ui-truncate

用于截断超长文本。

基本用法

单行截断

比较常见的使用方式:
$XView

根据容器的宽度自动截断:
$XView

在宽度截断模式下,可以截断任何可渲染元素,不只是 string:
$XView

可以自定义省略符号。不过注意,如果省略符号不是...的话,会在宽度截断模式下造成“字符在中间被截断”(在浏览器中没办法支持那么“智能”的截断):
$XView

每当 children 变化的时候,Truncate 会自动检查是否需要截断:
$XView

可以自定义 tootip 的 max-width:
$XView

设置 tooltip 样式:
$XView

多行截断

$XView

想要做多行截断的时候,先考虑能否通过普通的滚动来让用户浏览全部内容。从用户体验的角度来看,后者的体验更好,无需使用多行截断。

APIs

单行截断:

$XView

多行截断:

$XView

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code