cnd-components-mcp/componentData/components/Truncate/examples.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

## 示例
```tsx
/**
* @title basic
*/

import React from 'react'
import Truncate from '@alicloud/console-components-truncate'

const sentence1 = 'To be or not to be, this is a question. —— Hamlet'
const sentence2 =
  '毕竟西湖六月中，风光不与四时同。接天莲叶无穷碧，映日荷花别样红。'

const Demo = () => {
  return (
    <div className="truncate-demo">
      <h1>原文</h1>
      <Truncate threshold={50}>{sentence1}</Truncate>
      <br />
      <br />
      <Truncate type="width" threshold={5000}>
        {sentence2}
      </Truncate>
      <br />
      <br />
      <h1>length 截断（20）</h1>
      <Truncate threshold={20}>{sentence1}</Truncate>
      <br />
      <br />
      <Truncate threshold={20}>{sentence2}</Truncate>
      <br />
      <br />
      <h1>width 截断（200px）</h1>
      <Truncate type="width" threshold={200} align="t">
        {sentence1}
      </Truncate>
      <br />
      <br />
      <Truncate type="width" threshold={200} omission="。。。">
        {sentence2}
      </Truncate>
      <br />
      <br />
      <h1>Disable Tooltip</h1>
      <Truncate showTooltip={false} omission="。。。">
        {sentence1}
      </Truncate>
      <br />
      <br />
      <Truncate
        showTooltip={false}
        type="width"
        threshold={200}
        omission="。。。"
      >
        {sentence2}
      &lt;/Truncate&gt;
      &lt;br /&gt;
      &lt;br /&gt;
    &lt;/div&gt;
  )
}

export default Demo


```
```tsx
/**
* @title non-string
*/

import React, { useRef } from 'react'
import Truncate from '@alicloud/console-components-truncate'

const sentence2 =
  '毕竟西湖六月中，风光不与四时同。接天莲叶无穷碧，映日荷花别样红。'

const Demo = () => {
  const updaterRef = useRef&lt;null | (() =&gt; void)>(null)
  return (
    &lt;div className="truncate-demo"&gt;
      &lt;Truncate type="width" threshold={200}&gt;
        &lt;span&gt;{sentence2}&lt;/span&gt;
      &lt;/Truncate&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;Truncate type="width" threshold={200} omission="。。。"&gt;
        &lt;span&gt;{sentence2}&lt;/span&gt;
      &lt;/Truncate&gt;

      &lt;br /&gt;
      &lt;br /&gt;
      <Truncate
        type="width"
        threshold={200}
        omission=""
        align="br"
        tooltipMaxWidth={1200}
        // 从Truncate拿到updater
        updaterRef={updaterRef}
      >
        <img
          src="https://img.alicdn.com/tfs/TB1Ly5oS3HqK1RjSZFPXXcwapXa-238-54.png"
          width={300}
          onLoad={() => {
            // 图片的异步加载相当于绕过React直接更新子元素的宽度，
            // 因此需要手动调用updater来检查是否需要截断
            updaterRef.current && updaterRef.current()
          }}
          alt="alicloud logo"
        />
      &lt;/Truncate&gt;
    &lt;/div&gt;
  )
}
export default Demo


```
```tsx
/**
* @title custom-omission
*/

import React from 'react'
import Truncate from '@alicloud/console-components-truncate'
import { Icon } from '@alicloud/console-components'

const sentence2 =
  '毕竟西湖六月中，风光不与四时同。接天莲叶无穷碧，映日荷花别样红。'

const Demo = () => {
  return (
    &lt;div className="truncate-demo"&gt;
      &lt;Truncate type="length" threshold={20} omission={<Icon type="smile" /&gt;}>
        {sentence2}
      &lt;/Truncate&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      <Truncate
        type="width"
        threshold={200}
        omission={&lt;Icon style={{ marginLeft: '6px' }} type="ellipsis" /&gt;}
      >
        {sentence2}
      &lt;/Truncate&gt;
    &lt;/div&gt;
  )
}
export default Demo


```
```tsx
```