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

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

---
group:
  title: 云原生业务组件
---
https://code.alibaba-inc.com/cn-lowcode/cnd-truncate
> <h3>首部、中间截断：<br />type 仅支持 'width' <br />children仅支持字符串 | 行内元素<br />不支持omission自定义</h3><br /><h3>中间截断可能会出现...间隔过大问题，与字体大小、字符、截断宽度等有关，目前无法有效兼容。<br />方案：可适当调整截断宽度来解决</h3><br /><h3>末尾截断 threshold="auto" 时需要添加样式 width = 100% , 参考自适应</h3>
> 拉动模拟框，根据容器的宽度自动截断；
> 每当 children 变化的时候，Truncate 会自动检查是否需要截断：
> <h2>注意：</h2><h3>首部、中间 截断支持属性：<br />type 仅支持 'width' <br />children仅支持字符串 | 行内元素，其他无法截断<br />不支持omission自定义</h3>
| 属性            | 说明                                                                                                                                                                                                                                                                                      | 类型                                          | 默认值   |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | -------- |
| children        | 需要被截断的内容<br /> 如果想要通过字符长度来截断，则 children 必须为 string；<br />如果想要通过宽度来截断，则 children 可以为任意可渲染元素；                                                                                                                                            | string \| `React.ReactNode`                     | -        |
| position        | 截断位置<br />start、middle 截断只支持 type=width                                                                                                                                                                                                                                         | 'start' \| 'middle' \| 'end'                  | 'end'    |
| type            | 如何判断是否需要截断：<br /> 'length': 内容字符串长度是否大于 threshold 'width': 内容渲染后的宽度是否大于 threshold                                                                                                                                                                       | 'length' \| 'width'                           | 'length' |
| threshold       | 截断临界值：<br /> type 为 'length' 时，threshold 限制字符串长度，必须传入 number 类型。<br /> type 为 'width' 时，threshold 限制内容渲染后的宽度，可以传入 number 或'auto'。<br />其中'auto'表示截断宽度自动设置为容器元素的宽度。尤其适用于 flex 布局下，截断宽度由剩余宽度决定的场景。 | number \| 'auto'                              | 30       |
| showTooltip     | 在被截断时，是否使用气泡展示完整内容                                                                                                                                                                                                                                                      | boolean                                       | true     |
| align           | 气泡对齐方式，可选值参见 Balloon（Tooltip）组件文档                                                                                                                                                                                                                                       | AlignType                                     | 'r'(右)  |
| omission        | 省略符号                                                                                                                                                                                                                                                                                  | `React.ReactNode`                               | ...      |
| tooltipMaxWidth | tooltip 的最大宽度限制，showTooltip 为 true 时才有效                                                                                                                                                                                                                                      | number                                        |          |
| className       | 容器的类名                                                                                                                                                                                                                                                                                | string                                        |          |
| style           | 容器的样式                                                                                                                                                                                                                                                                                | `React.CSSProperties`                           |          |
| popupStyle      | 当 tooltip 展示时，设置弹层组件 style，透传给 Popup                                                                                                                                                                                                                                       | `React.CSSProperties`                           |          |
| popupClassName  | 当 tooltip 展示时，设置弹层组件的 className，透传给 Popup                                                                                                                                                                                                                                 | string                                        |          |
| patchPopupProps | 完全控制 tooltip 的 props。比如指定 popupContainer。<br />BalloonProps 的类型见 Balloon 组件文档。                                                                                                                                                                                        | (originalProps: BalloonProps) => BalloonProps |          |
| 属性            | 说明                                                                                               | 类型                                          | 默认值  |
| --------------- | -------------------------------------------------------------------------------------------------- | --------------------------------------------- | ------- |
| lines           | 展示的行数                                                                                         | number                                        |         |
| ellipsis        | 如何渲染省略号                                                                                     | string \| `React.ReactNode`                     |         |
| showTooltip     | 在被截断时，是否使用气泡展示完整内容                                                               | boolean                                       | true    |
| patchPopupProps | 完全控制 tooltip 的 props。比如指定 popupContainer。<br />BalloonProps 的类型见 Balloon 组件文档。 | (originalProps: BalloonProps) => BalloonProps |         |
| popupClassName  | 当 tooltip 展示时，设置弹层组件的 className，透传给 Popup                                          | string                                        |         |
| popupStyle      | 当 tooltip 展示时，设置弹层组件 style，透传给 Popup                                                | `React.CSSProperties`                           |         |
| tooltipMaxWidth | tooltip 的最大宽度限制，showTooltip 为 true 时才有效                                               | number                                        |         |
| align           | 气泡对齐方式，可选值参见 Balloon（Tooltip）组件文档                                                | AlignType                                     | 'b'(下) |