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

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

## 基本使用
```tsx preview
import React from "react";
import { Truncate } from "@ali/cnd";

const Demo = () => {
  const Display = (
    <span>
      ack-agility-registry.cn-shanghai.cr.aliyuncs.com/ecp_builder/metrics-adapter:v0.1.2-3e8244e-001
    </span>
  );

  return (
    <div style={{ width: 460 }}>
      <h2>首部截断</h2>
      <Truncate position="start" threshold="auto" type="width">
        {Display}
      </Truncate>
      <br />
      <h2>中间截断</h2>
      <Truncate position="middle" threshold="auto" type="width">
        {Display}
      </Truncate>
      <br />
      <h2>末尾截断</h2>
      <Truncate threshold="auto" type="width" style={{ width: "100%" }}>
        {Display}
      </Truncate>
    </div>
  );
};

export default Demo;
```
## 自适应
```tsx preview
import React from "react";
import { Truncate } from "@ali/cnd";
import { FakeBrowserWithWrapper as FakeBrowser } from "@alicloud/console-components-fake-browser";

const Demo = () => {
  const Display = (
    <span>
      ack-agility-registry.cn-shanghai.cr.aliyuncs.com/ecp_builder/metrics-adapter:v0.1.2-3e8244e-001
    </span>
  );
  return (
    <>
      <FakeBrowser>
        <h2>首部截断</h2>
        <Truncate position="start" threshold="auto" type="width">
          {Display}
        </Truncate>
        <h2>中间截断</h2>
        <Truncate position="middle" threshold="auto" type="width">
          {Display}
        </Truncate>
        <h2>末尾截断</h2>
        <Truncate type="width" threshold="auto" style={{ width: "100%" }}>
          {Display}
        </Truncate>
      </FakeBrowser>
    </>
  );
};

export default Demo;
```
## 监控 Child
```tsx preview
import React, { useState } from "react";
import { Input, Truncate } from "@ali/cnd";

const Demo = () => {
  const [text, setText] = useState(
    "If life deceives you, Don't be sad, don't be impatient! In blue days, calm is needed: Believe it, happy days will come"
  );
  return (
    <div>
      <h3>请输入text: </h3>
      <div>
        <Input value={text} onChange={(str) => setText(str)} />
      </div>
      <br />
      <br />
      <p>首部: </p>
      <Truncate type="width" threshold={368} position="start" align="t">
        {text}
      </Truncate>
      <br />
      <p>中间: </p>
      <Truncate type="width" threshold={368} position="middle" align="t">
        {text}
      </Truncate>
      <br />
      <p>尾部: </p>
      <Truncate type="width" threshold={368} align="t">
        {text}
      </Truncate>
    </div>
  );
};
export default Demo;
```
## tooltipMaxWidth
```tsx preview
import React from "react";
import { Truncate } from "@ali/cnd";

const Demo = () => {
  const Display = (
    <span>
      一曲新词酒一杯，去年天气旧亭台。夕阳西下几时回？无可奈何花落去，似曾相识燕归来。小园香径独徘徊。
    </span>
  );
  return (
    <div>
      <h2>首部截断</h2>
      <Truncate
        position="start"
        threshold={460}
        type="width"
        tooltipMaxWidth={1000}
      >
        {Display}
      &lt;/Truncate&gt;
      &lt;br /&gt;
      &lt;h2&gt;中间截断&lt;/h2&gt;
      <Truncate
        position="middle"
        threshold={460}
        type="width"
        tooltipMaxWidth={200}
      >
        {Display}
      &lt;/Truncate&gt;
      &lt;br /&gt;
      &lt;h2&gt;末尾截断&lt;/h2&gt;
      &lt;Truncate threshold={460} type="width" align="t" tooltipMaxWidth={300}&gt;
        {Display}
      &lt;/Truncate&gt;
    &lt;/div&gt;
  );
};

export default Demo;
```
## 多行截断
```tsx preview
import React from "react";
import { MultiLines } from "@ali/cnd";

const Demo = () => {
  const longText =
    "毕竟西湖六月中，风光不与四时同。接天莲叶无穷碧，映日荷花别样红。".repeat(
      10
    );
  return (
    &lt;div style={{ width: 460 }}&gt;
      &lt;MultiLines lines={2}&gt;{longText}&lt;/MultiLines&gt;
    &lt;/div&gt;
  );
};

export default Demo;
```