Repository: Tencent/tdesign-react
Pull request #3487: feat(breadcrumb): add breadcrumb collapse API
Author: login: moecasts
Created: 2025-04-04T15:52:29Z | Merged: 2025-04-08T07:01:40Z

re #3391

<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？

- [ ] 日常 bug 修复
- [x] 新特性提交
- [ ] 文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] CI/CD 改进
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他

### 🔗 相关 Issue

<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
-->

### 💡 需求背景和解决方案

<!--
1. 要解决的具体问题。
2. 列出最终的 API 实现和用法。
3. 涉及UI/交互变动需要有截图或 GIF。
-->

### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- feat(breadcrumb): 新增折叠选项的功能

- [ ] 本条 PR 不需要纳入 Changelog

### ☑️ 请求合并前的自查清单

⚠️ 请自检并全部**勾选全部选项**。⚠️

- [x] 文档已补充或无须补充
- [x] 代码演示已提供或无须提供
- [x] TypeScript 定义已补充或无须补充
- [x] Changelog 已提供或无须提供



Diff:
diff --git a/packages/common b/packages/common
index 4cdece3eb4..f4946e0d15 160000
--- a/packages/common
+++ b/packages/common
@@ -1 +1 @@
-Subproject commit 4cdece3eb4d1b13d4a6023717b5c9bf050f73098
+Subproject commit f4946e0d158646c5575d0cb8242965bbdbc61901
diff --git a/packages/components/breadcrumb/Breadcrumb.tsx b/packages/components/breadcrumb/Breadcrumb.tsx
index 8bb5e8f1f0..04b07a3e40 100644
--- a/packages/components/breadcrumb/Breadcrumb.tsx
+++ b/packages/components/breadcrumb/Breadcrumb.tsx
@@ -1,5 +1,8 @@
-import React from 'react';
+import React, { Children, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
+import { EllipsisIcon } from 'tdesign-icons-react';
+import { isFunction } from 'lodash-es';
+import log from '@tdesign/common-js/log/index';
 import useConfig from '../hooks/useConfig';
 import forwardRefWithStatics from '../_util/forwardRefWithStatics';
 import BreadcrumbItem from './BreadcrumbItem';
@@ -11,15 +14,18 @@ import { TdBreadcrumbItemProps } from './type';
 
 const Breadcrumb = forwardRefWithStatics(
   (props: BreadcrumbProps, ref: React.Ref<HTMLDivElement>) => {
-    const { children, options, separator, maxItemWidth, className, ...restProps } = useDefaultProps(
+    const { children, options, separator, maxItemWidth, className, maxItems, itemsAfterCollapse, itemsBeforeCollapse, ellipsis, ...restProps } = useDefaultProps(
       props,
       breadcrumbDefaultProps,
     );
     const { classPrefix } = useConfig();
 
-    let content = children;
-    if (options && options.length) {
-      content = options.map((option, index) => {
+    const renderOptionsToItems = useCallback((options: TdBreadcrumbItemProps[]) => {
+      if (!options || !options.length) {
+        return undefined;
+      }
+
+      return options.map((option, index) => {
         const targetProps: TdBreadcrumbItemProps = {};
         if (option.target) {
           targetProps.target = option.target;
@@ -37,12 +43,74 @@ const Breadcrumb = forwardRefWithStatics(
             separator={separator}
             maxItemWidth={maxItemWidth}
             icon={option.icon}
+            content={option.content}
           >
             {option.content || option.children}
           </BreadcrumbItem>
         );
       });
-    }
+    }, [maxItemWidth, separator]);
+
+    const renderEllipsis = useCallback((items: TdBreadcrumbItemProps[]) => {
+      if (!ellipsis) {
+        return <EllipsisIcon />;
+      }
+
+      if (isFunction(ellipsis)) {
+        return ellipsis({items, separator});
+      }
+
+      return ellipsis;
+    }, [ellipsis, separator]);
+
+    const content = useMemo(() => {
+      let items = renderOptionsToItems(options) || Children.toArray(children);
+
+      const itemsCount = items?.length || 0;
+
+      if (!items || !maxItems) {
+        return items;
+      }
+
+      if (maxItems >= itemsCount) {
+        return items;
+      }
+
+      // 配置有误的情况，不显示省略并告警
+      if (
+        maxItems &&
+        (!itemsBeforeCollapse || !itemsAfterCollapse)
+      ) {
+        log.error('Breadcrumb', '需要设置 itemsBeforeCollapse 和 itemsAfterCollapse 属性来控制省略号前后的显示项数。');
+        return items;
+      }
+
+      if (
+        maxItems &&
+        maxItems < (itemsAfterCollapse || 0) + (itemsBeforeCollapse || 0)
+      ) {
+        log.error('Breadcrumb', `maxItems={${maxItems}} 必须大于或等于 itemsBeforeCollapse={${itemsBeforeCollapse}} + itemsAfterCollapse={${itemsAfterCollapse}}`);
+        return items;
+      }
+
+      const startCount = itemsBeforeCollapse;
+      const endCount = itemsAfterCollapse;
+
+      const collapsedItems = items.slice(startCount, itemsCount - endCount);
+
+      const beforeItems = items.slice(0, startCount);
+      const afterItems = items.slice(itemsCount - endCount);
+
+      const ellipsis = renderEllipsis(collapsedItems.map((item) => item.props));
+
+      items = [
+        ...beforeItems,
+        <BreadcrumbItem key="ellipsis" readOnly>{ellipsis}</BreadcrumbItem>,
+        ...afterItems,
+      ];
+
+      return items;
+    }, [renderOptionsToItems, options, children, maxItems, itemsBeforeCollapse, itemsAfterCollapse, renderEllipsis]);
 
     return (
       <BreadcrumbContext.Provider
diff --git a/packages/components/breadcrumb/BreadcrumbItem.tsx b/packages/components/breadcrumb/BreadcrumbItem.tsx
index 0004dc1783..dfa4e25b57 100644
--- a/packages/components/breadcrumb/BreadcrumbItem.tsx
+++ b/packages/components/breadcrumb/BreadcrumbItem.tsx
@@ -34,6 +34,7 @@ const BreadcrumbItem = forwardRef<HTMLDivElement, BreadcrumbItemProps>((props, r
     content,
     onClick,
     tooltipProps,
+    readOnly: readonly,
     ...restProps
   } = useDefaultProps<BreadcrumbItemProps>(props, breadcrumbItemDefaultProps);
 
@@ -45,7 +46,8 @@ const BreadcrumbItem = forwardRef<HTMLDivElement, BreadcrumbItemProps>((props, r
   const textWrapperClassName = `${classPrefix}-breadcrumb__inner`;
   const textClassName = `${classPrefix}-breadcrumb__inner-text`;
 
-  const textClassNames = classNames(`${classPrefix}-breadcrumb--text-overflow`, {
+  const textClassNames = classNames({
+    [`${classPrefix}-breadcrumb--text-overflow`]: !readonly,
     [commonClassNames.STATUS.disabled]: disabled,
   });
   const separatorClassName = `${classPrefix}-breadcrumb__separator`;
diff --git a/packages/components/breadcrumb/BreadcrumbProps.ts b/packages/components/breadcrumb/BreadcrumbProps.ts
index 5f3987e687..1f8b4057fc 100644
--- a/packages/components/breadcrumb/BreadcrumbProps.ts
+++ b/packages/components/breadcrumb/BreadcrumbProps.ts
@@ -7,4 +7,5 @@ export interface BreadcrumbProps extends StyledProps, React.PropsWithChildren<Td
 export interface BreadcrumbItemProps extends StyledProps, React.PropsWithChildren<TdBreadcrumbItemProps> {
   separator?: TdBreadcrumbProps['separator'];
   maxItemWidth?: TdBreadcrumbProps['maxItemWidth'];
+  readOnly?: boolean;
 }
diff --git a/packages/components/breadcrumb/__tests__/breadcrumb.test.tsx b/packages/components/breadcrumb/__tests__/breadcrumb.test.tsx
index 55984d5fc3..c707efe656 100644
--- a/packages/components/breadcrumb/__tests__/breadcrumb.test.tsx
+++ b/packages/components/breadcrumb/__tests__/breadcrumb.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { vi, render } from '@test/utils';
 import Breadcrumb from '../Breadcrumb';
+import { TdBreadcrumbItemProps } from '../type';
 
 const { BreadcrumbItem } = Breadcrumb;
 
@@ -57,4 +58,120 @@ describe('Breadcrumb', () => {
       expect(node).toHaveTextContent(options[index]?.content);
     });
   });
+
+  test('render ellipsis breadcrumbItem correctly (components)', () => {
+    const options = [
+      { content: '页面1' },
+      { content: '页面2' },
+      { content: '页面3' },
+      { content: '页面4' },
+      { content: '页面5' },
+      { content: '页面6' },
+      { content: '页面7' },
+      { content: '页面8' },
+    ];
+
+    const el = (
+      <Breadcrumb maxItems={5} itemsBeforeCollapse={2} itemsAfterCollapse={1} data-testid={rootTestID}>
+        {options.map((option) => (
+          <BreadcrumbItem key={option.content}>{option.content}</BreadcrumbItem>
+        ))}
+      </Breadcrumb>
+    );
+
+    const wrapper = render(el);
+
+    const root = wrapper.getByTestId(rootTestID);
+
+    expect(root.childNodes).toHaveLength(4);
+    expect(root.childNodes[0]).toHaveTextContent('页面1');
+    expect(root.childNodes[1]).toHaveTextContent('页面2');
+    expect(root.childNodes[3]).toHaveTextContent('页面8');
+  });
+
+  test('render ellipsis breadcrumbItem correctly (options)', () => {
+    const options = [
+      { content: '页面1' },
+      { content: '页面2' },
+      { content: '页面3' },
+      { content: '页面4' },
+      { content: '页面5' },
+      { content: '页面6' },
+      { content: '页面7' },
+      { content: '页面8' },
+    ];
+
+    const el = (
+      <Breadcrumb maxItems={5} itemsBeforeCollapse={2} itemsAfterCollapse={1} data-testid={rootTestID} options={options} />
+    );
+
+    const wrapper = render(el);
+
+    const root = wrapper.getByTestId(rootTestID);
+
+    expect(root.childNodes).toHaveLength(4);
+    expect(root.childNodes[0]).toHaveTextContent('页面1');
+    expect(root.childNodes[1]).toHaveTextContent('页面2');
+    expect(root.childNodes[3]).toHaveTextContent('页面8');
+  });
+
+  test('render custom ellipsis breadcrumbItem correctly (string)', () => {
+    const options = [
+      { content: '页面1' },
+      { content: '页面2' },
+      { content: '页面3' },
+      { content: '页面4' },
+      { content: '页面5' },
+      { content: '页面6' },
+      { content: '页面7' },
+      { content: '页面8' },
+    ];
+
+    const el = (
+      <Breadcrumb maxItems={5} itemsBeforeCollapse={2} itemsAfterCollapse={1} data-testid={rootTestID} options={options} ellipsis="..." />
+    );
+
+    const wrapper = render(el);
+
+    const root = wrapper.getByTestId(rootTestID);
+
+    expect(root.childNodes).toHaveLength(4);
+    expect(root.childNodes[2]).toHaveTextContent('...');
+  });
+
+  test('render custom ellipsis breadcrumbItem correctly (function)', () => {
+    const options = [
+      { content: '页面1' },
+      { content: '页面2' },
+      { content: '页面3' },
+      { content: '页面4' },
+      { content: '页面5' },
+      { content: '页面6' },
+      { content: '页面7' },
+      { content: '页面8' },
+    ];
+
+    const separator = '>';
+
+    const getEllipsis = (items: TdBreadcrumbItemProps[]) => items.map((item: any) => item.content).join(separator);
+
+    const el = (
+      <Breadcrumb
+        maxItems={5}
+        itemsBeforeCollapse={2}
+        itemsAfterCollapse={1}
+        data-testid={rootTestID}
+        separator={separator}
+        options={options}
+        ellipsis={({items}) => getEllipsis(items)}
+      />
+    );
+
+    const wrapper = render(el);
+
+    const root = wrapper.getByTestId(rootTestID);
+
+    expect(root.childNodes).toHaveLength(4);
+    expect(root.childNodes[2]).toHaveTextContent(getEllipsis(options.slice(2, 7)));
+  });
 });
diff --git a/packages/components/breadcrumb/_example/custom-ellipsis.tsx b/packages/components/breadcrumb/_example/custom-ellipsis.tsx
new file mode 100644
index 0000000000..a1941ac699
--- /dev/null
+++ b/packages/components/breadcrumb/_example/custom-ellipsis.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Breadcrumb, Button, Dropdown } from 'tdesign-react';
+import { EllipsisIcon } from 'tdesign-icons-react';
+
+const { BreadcrumbItem } = Breadcrumb;
+
+const options = [
+  { content: '页面1'},
+  { content: '页面2'},
+  { content: '页面3'},
+  { content: '页面4'},
+  { content: '页面5'},
+];
+
+export default function BreadcrumbExample() {
+  return (
+    <>
+      <Breadcrumb maxItems={4} itemsBeforeCollapse={2} itemsAfterCollapse={1} ellipsis={(props) => (
+          <Dropdown>
+            <Button icon={<EllipsisIcon />} shape='square' variant='text' />
+            <Dropdown.DropdownMenu>
+              {props.items.map((item) => (
+                <Dropdown.DropdownItem key={String(item.content)}>{item.content}</Dropdown.DropdownItem>
+              ))}
+            </Dropdown.DropdownMenu>
+          </Dropdown>
+        )}>
+        {options.map((option) => (
+          <BreadcrumbItem key={option.content} content={option.content} />
+        ))}
+      </Breadcrumb>
+
+      <Breadcrumb maxItems={4} itemsBeforeCollapse={2} itemsAfterCollapse={1} options={options} ellipsis={(props) => (
+          <Dropdown>
+            <Button icon={<EllipsisIcon />} shape='square' variant='text' />
+            <Dropdown.DropdownMenu>
+              {props.items.map((item) => (
+                <Dropdown.DropdownItem key={String(item.content)}>{item.content}</Dropdown.DropdownItem>
+              ))}
+            </Dropdown.DropdownMenu>
+          </Dropdown>
+        )} />
+    </>
+  );
+}
diff --git a/packages/components/breadcrumb/_example/ellipsis.tsx b/packages/components/breadcrumb/_example/ellipsis.tsx
new file mode 100644
index 0000000000..96a3f1707a
--- /dev/null
+++ b/packages/components/breadcrumb/_example/ellipsis.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Breadcrumb } from 'tdesign-react';
+
+const { BreadcrumbItem } = Breadcrumb;
+
+const options = [
+  { content: '页面1'},
+  { content: '页面2'},
+  { content: '页面3'},
+  { content: '页面4'},
+  { content: '页面5'},
+];
+
+export default function BreadcrumbExample() {
+  return (
+    <>
+      <Breadcrumb maxItems={3} itemsBeforeCollapse={2} itemsAfterCollapse={1}>
+        {options.map((option) => (
+          <BreadcrumbItem key={option.content} content={option.content} />
+        ))}
+      </Breadcrumb>
+
+      <Breadcrumb maxItems={3} itemsBeforeCollapse={2} itemsAfterCollapse={1} options={options} />
+    </>
+  );
+}
diff --git a/packages/components/breadcrumb/type.ts b/packages/components/breadcrumb/type.ts
index cb3bcbcfff..67c2bc22c0 100644
--- a/packages/components/breadcrumb/type.ts
+++ b/packages/components/breadcrumb/type.ts
@@ -9,10 +9,26 @@ import { TNode, TElement } from '../common';
 import { MouseEvent } from 'react';
 
 export interface TdBreadcrumbProps {
+  /**
+   * 自定义折叠时省略号的内容
+   */
+  ellipsis?: string | TNode<{ items: Array<TdBreadcrumbItemProps>; separator: TdBreadcrumbProps['separator'] }>;
+  /**
+   * 超过面包屑最大显示数量时，省略号后显示几项。`maxItems > 0`时有效
+   */
+  itemsAfterCollapse?: number;
+  /**
+   * 超过面包屑最大显示数量时，省略号前显示几项。`maxItems > 0`时有效
+   */
+  itemsBeforeCollapse?: number;
   /**
    * 单项最大宽度，超出后会以省略号形式呈现
    */
   maxItemWidth?: string;
+  /**
+   * 显示的面包屑的最大数量，超出该值后中间的面包屑内容将会显示为省略号。值`<= 0`代表不限制
+   */
+  maxItems?: number;
   /**
    * 面包屑项，功能同 BreadcrumbItem
    */
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index 36ecb8a89c..92640a44ed 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -6168,6 +6168,646 @@ exports[`csr snapshot test > csr test packages/components/breadcrumb/_example/cu
 </div>
 `;
 
+exports[`csr snapshot test > csr test packages/components/breadcrumb/_example/custom-ellipsis.tsx 1`] = `
+<div>
+  <div
+    class="t-breadcrumb"
+  >
+    <div
+      class="t-breadcrumb__item"
+    >
+      <span
+        class="t-breadcrumb--text-overflow"
+      >
+        <span
+          class="t-breadcrumb__inner"
+          style="max-width: 120px;"
+        >
+          <span
+            class="t-breadcrumb__inner-text"
+          >
+            页面1
+          </span>
+        </span>
+      </span>
+      <span
+        class="t-breadcrumb__separator"
+      >
+        <svg
+          class="t-icon t-icon-chevron-right"
+          fill="none"
+          height="1em"
+          style="opacity: 0.5;"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="t-breadcrumb__item"
+    >
+      <span
+        class="t-breadcrumb--text-overflow"
+      >
+        <span
+          class="t-breadcrumb__inner"
+          style="max-width: 120px;"
+        >
+          <span
+            class="t-breadcrumb__inner-text"
+          >
+            页面2
+          </span>
+        </span>
+      </span>
+      <span
+        class="t-breadcrumb__separator"
+      >
+        <svg
+          class="t-icon t-icon-chevron-right"
+          fill="none"
+          height="1em"
+          style="opacity: 0.5;"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="t-breadcrumb__item"
+    >
+      <span
+        class=""
+      >
+        <span
+          class="t-breadcrumb__inner"
+          style="max-width: 120px;"
+        >
+          <span
+            class="t-breadcrumb__inner-text"
+          >
+            <button
+              class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"
+              type="button"
+            >
+              <svg
+                class="t-icon t-icon-ellipsis"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M3 10.5H6V13.5H3V10.5ZM10.5 10.5H13.5V13.5H10.5V10.5ZM18 10.5H21V13.5H18V10.5Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </button>
+          </span>
+        </span>
+      </span>
+      <span
+        class="t-breadcrumb__separator"
+      >
+        <svg
+          class="t-icon t-icon-chevron-right"
+          fill="none"
+          height="1em"
+          style="opacity: 0.5;"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="t-breadcrumb__item"
+    >
+      <span
+        class="t-breadcrumb--text-overflow"
+      >
+        <span
+          class="t-breadcrumb__inner"
+          style="max-width: 120px;"
+        >
+          <span
+            class="t-breadcrumb__inner-text"
+          >
+            页面5
+          </span>
+        </span>
+      </span>
+      <span
+        class="t-breadcrumb__separator"
+      >
+        <svg
+          class="t-icon t-icon-chevron-right"
+          fill="none"
+          height="1em"
+          style="opacity: 0.5;"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+  <div
+    class="t-breadcrumb"
+  >
+    <div
+      class="t-breadcrumb__item"
+    >
+      <span
+        class="t-breadcrumb--text-overflow"
+      >
+        <span
+          class="t-breadcrumb__inner"
+          style="max-width: 120px;"
+        >
+          <span
+            class="t-breadcrumb__inner-text"
+          >
+            页面1
+          </span>
+        </span>
+      </span>
+      <span
+        class="t-breadcrumb__separator"
+      >
+        <svg
+          class="t-icon t-icon-chevron-right"
+          fill="none"
+          height="1em"
+          style="opacity: 0.5;"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="t-breadcrumb__item"
+    >
+      <span
+        class="t-breadcrumb--text-overflow"
+      >
+        <span
+          class="t-breadcrumb__inner"
+          style="max-width: 120px;"
+        >
+          <span
+            class="t-breadcrumb__inner-text"
+          >
+            页面2
+          </span>
+        </span>
+      </span>
+      <span
+        class="t-breadcrumb__separator"
+      >
+        <svg
+          class="t-icon t-icon-chevron-right"
+          fill="none"
+          height="1em"
+          style="opacity: 0.5;"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="t-breadcrumb__item"
+    >
+      <span
+        class=""
+      >
+        <span
+          class="t-breadcrumb__inner"
+          style="max-width: 120px;"
+        >
+          <span
+            class="t-breadcrumb__inner-text"
+          >
+            <button
+              class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"
+              type="button"
+            >
+              <svg
+                class="t-icon t-icon-ellipsis"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M3 10.5H6V13.5H3V10.5ZM10.5 10.5H13.5V13.5H10.5V10.5ZM18 10.5H21V13.5H18V10.5Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </button>
+          </span>
+        </span>
+      </span>
+      <span
+        class="t-breadcrumb__separator"
+      >
+        <svg
+          class="t-icon t-icon-chevron-right"
+          fill="none"
+          height="1em"
+          style="opacity: 0.5;"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="t-breadcrumb__item"
+    >
+      <span
+        class="t-breadcrumb--text-overflow"
+      >
+        <span
+          class="t-breadcrumb__inner"
+          style="max-width: 120px;"
+        >
+          <span
+            class="t-breadcrumb__inner-text"
+          >
+            页面5
+          </span>
+        </span>
+      </span>
+      <span
+        class="t-breadcrumb__separator"
+      >
+        <svg
+          class="t-icon t-icon-chevron-right"
+          fill="none"
+          height="1em"
+          style="opacity: 0.5;"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test packages/components/breadcrumb/_example/ellipsis.tsx 1`] = `
+<div>
+  <div
+    class="t-breadcrumb"
+  >
+    <div
+      class="t-breadcrumb__item"
+    >
+      <span
+        class="t-breadcrumb--text-overflow"
+      >
+        <span
+          class="t-breadcrumb__inner"
+          style="max-width: 120px;"
+        >
+          <span
+            class="t-breadcrumb__inner-text"
+          >
+            页面1
+          </span>
+        </span>
+      </span>
+      <span
+        class="t-breadcrumb__separator"
+      >
+        <svg
+          class="t-icon t-icon-chevron-right"
+          fill="none"
+          height="1em"
+          style="opacity: 0.5;"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="t-breadcrumb__item"
+    >
+      <span
+        class="t-breadcrumb--text-overflow"
+      >
+        <span
+          class="t-breadcrumb__inner"
+          style="max-width: 120px;"
+        >
+          <span
+            class="t-breadcrumb__inner-text"
+          >
+            页面2
+          </span>
+        </span>
+      </span>
+      <span
+        class="t-breadcrumb__separator"
+      >
+        <svg
+          class="t-icon t-icon-chevron-right"
+          fill="none"
+          height="1em"
+          style="opacity: 0.5;"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="t-breadcrumb__item"
+    >
+      <span
+        class=""
+      >
+        <span
+          class="t-breadcrumb__inner"
+          style="max-width: 120px;"
+        >
+          <span
+            class="t-breadcrumb__inner-text"
+          >
+            <svg
+              class="t-icon t-icon-ellipsis"
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M3 10.5H6V13.5H3V10.5ZM10.5 10.5H13.5V13.5H10.5V10.5ZM18 10.5H21V13.5H18V10.5Z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+        </span>
+      </span>
+      <span
+        class="t-breadcrumb__separator"
+      >
+        <svg
+          class="t-icon t-icon-chevron-right"
+          fill="none"
+          height="1em"
+          style="opacity: 0.5;"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="t-breadcrumb__item"
+    >
+      <span
+        class="t-breadcrumb--text-overflow"
+      >
+        <span
+          class="t-breadcrumb__inner"
+          style="max-width: 120px;"
+        >
+          <span
+            class="t-breadcrumb__inner-text"
+          >
+            页面5
+          </span>
+        </span>
+      </span>
+      <span
+        class="t-breadcrumb__separator"
+      >
+        <svg
+          class="t-icon t-icon-chevron-right"
+          fill="none"
+          height="1em"
+          style="opacity: 0.5;"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+  <div
+    class="t-breadcrumb"
+  >
+    <div
+      class="t-breadcrumb__item"
+    >
+      <span
+        class="t-breadcrumb--text-overflow"
+      >
+        <span
+          class="t-breadcrumb__inner"
+          style="max-width: 120px;"
+        >
+          <span
+            class="t-breadcrumb__inner-text"
+          >
+            页面1
+          </span>
+        </span>
+      </span>
+      <span
+        class="t-breadcrumb__separator"
+      >
+        <svg
+          class="t-icon t-icon-chevron-right"
+          fill="none"
+          height="1em"
+          style="opacity: 0.5;"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="t-breadcrumb__item"
+    >
+      <span
+        class="t-breadcrumb--text-overflow"
+      >
+        <span
+          class="t-breadcrumb__inner"
+          style="max-width: 120px;"
+        >
+          <span
+            class="t-breadcrumb__inner-text"
+          >
+            页面2
+          </span>
+        </span>
+      </span>
+      <span
+        class="t-breadcrumb__separator"
+      >
+        <svg
+          class="t-icon t-icon-chevron-right"
+          fill="none"
+          height="1em"
+          style="opacity: 0.5;"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="t-breadcrumb__item"
+    >
+      <span
+        class=""
+      >
+        <span
+          class="t-breadcrumb__inner"
+          style="max-width: 120px;"
+        >
+          <span
+            class="t-breadcrumb__inner-text"
+          >
+            <svg
+              class="t-icon t-icon-ellipsis"
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M3 10.5H6V13.5H3V10.5ZM10.5 10.5H13.5V13.5H10.5V10.5ZM18 10.5H21V13.5H18V10.5Z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+        </span>
+      </span>
+      <span
+        class="t-breadcrumb__separator"
+      >
+        <svg
+          class="t-icon t-icon-chevron-right"
+          fill="none"
+          height="1em"
+          style="opacity: 0.5;"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="t-breadcrumb__item"
+    >
+      <span
+        class="t-breadcrumb--text-overflow"
+      >
+        <span
+          class="t-breadcrumb__inner"
+          style="max-width: 120px;"
+        >
+          <span
+            class="t-breadcrumb__inner-text"
+          >
+            页面5
+          </span>
+        </span>
+      </span>
+      <span
+        class="t-breadcrumb__separator"
+      >
+        <svg
+          class="t-icon t-icon-chevron-right"
+          fill="none"
+          height="1em"
+          style="opacity: 0.5;"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`csr snapshot test > csr test packages/components/breadcrumb/_example/href.tsx 1`] = `
 <div>
   <div>
@@ -137070,6 +137710,10 @@ exports[`ssr snapshot test > ssr test packages/components/breadcrumb/_example/ba
 
 exports[`ssr snapshot test > ssr test packages/components/breadcrumb/_example/custom.tsx 1`] = `"<div class="t-breadcrumb"><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:150"><span class="t-breadcrumb__inner-text">页面1</span></span></span><span class="t-breadcrumb__separator">&gt;&gt;</span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:150"><span class="t-breadcrumb__inner-text">页面2</span></span></span><span class="t-breadcrumb__separator">&gt;&gt;</span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:160"><span class="t-breadcrumb__inner-text">页面3</span></span></span><span class="t-breadcrumb__separator">&gt;&gt;</span></div></div><div class="t-breadcrumb"><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:150"><span class="t-breadcrumb__inner-text">页面1</span></span></span><span class="t-breadcrumb__separator">/////</span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:150"><span class="t-breadcrumb__inner-text">页面2</span></span></span><span class="t-breadcrumb__separator">/////</span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:160"><span class="t-breadcrumb__inner-text">页面3</span></span></span><span class="t-breadcrumb__separator">/////</span></div></div>"`;
 
+exports[`ssr snapshot test > ssr test packages/components/breadcrumb/_example/custom-ellipsis.tsx 1`] = `"<div class="t-breadcrumb"><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面1</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面2</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class=""><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text"><button type="button" class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-ellipsis"><path fill="currentColor" d="M3 10.5H6V13.5H3V10.5ZM10.5 10.5H13.5V13.5H10.5V10.5ZM18 10.5H21V13.5H18V10.5Z"></path></svg></button></span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面5</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div></div><div class="t-breadcrumb"><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面1</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面2</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class=""><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text"><button type="button" class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-ellipsis"><path fill="currentColor" d="M3 10.5H6V13.5H3V10.5ZM10.5 10.5H13.5V13.5H10.5V10.5ZM18 10.5H21V13.5H18V10.5Z"></path></svg></button></span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面5</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div></div>"`;
+
+exports[`ssr snapshot test > ssr test packages/components/breadcrumb/_example/ellipsis.tsx 1`] = `"<div class="t-breadcrumb"><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面1</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面2</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class=""><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-ellipsis"><path fill="currentColor" d="M3 10.5H6V13.5H3V10.5ZM10.5 10.5H13.5V13.5H10.5V10.5ZM18 10.5H21V13.5H18V10.5Z"></path></svg></span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面5</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div></div><div class="t-breadcrumb"><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面1</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面2</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class=""><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-ellipsis"><path fill="currentColor" d="M3 10.5H6V13.5H3V10.5ZM10.5 10.5H13.5V13.5H10.5V10.5ZM18 10.5H21V13.5H18V10.5Z"></path></svg></span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面5</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div></div>"`;
+
 exports[`ssr snapshot test > ssr test packages/components/breadcrumb/_example/href.tsx 1`] = `"<div><div class="t-breadcrumb"><div class="t-breadcrumb__item"><a class="t-breadcrumb--text-overflow t-link" href="/" target="_blank"><span class="t-breadcrumb__inner" style="max-width:150"><span class="t-breadcrumb__inner-text">页面1</span></span></a><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow t-is-disabled"><span class="t-breadcrumb__inner" style="max-width:150"><span class="t-breadcrumb__inner-text">页面2</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:160"><span class="t-breadcrumb__inner-text">页面3</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div></div><div style="margin-top:20px">点击计数器：<!-- -->0</div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/breadcrumb/_example/icon.tsx 1`] = `"<div class="t-breadcrumb"><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-bookmark"><path fill="currentColor" d="M4 3H20V22.9432L12 17.2289L4 22.9432V3ZM6 5V19.0568L12 14.7711L18 19.0568V5H6Z"></path></svg><span class="t-breadcrumb__inner-text">页面1</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-bookmark"><path fill="currentColor" d="M4 3H20V22.9432L12 17.2289L4 22.9432V3ZM6 5V19.0568L12 14.7711L18 19.0568V5H6Z"></path></svg><span class="t-breadcrumb__inner-text">页面2</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-bookmark"><path fill="currentColor" d="M4 3H20V22.9432L12 17.2289L4 22.9432V3ZM6 5V19.0568L12 14.7711L18 19.0568V5H6Z"></path></svg><span class="t-breadcrumb__inner-text">页面3</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div></div>"`;
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index ac46f98ffa..e2fd58c273 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -90,6 +90,10 @@ exports[`ssr snapshot test > ssr test packages/components/breadcrumb/_example/ba
 
 exports[`ssr snapshot test > ssr test packages/components/breadcrumb/_example/custom.tsx 1`] = `"<div class="t-breadcrumb"><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:150"><span class="t-breadcrumb__inner-text">页面1</span></span></span><span class="t-breadcrumb__separator">&gt;&gt;</span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:150"><span class="t-breadcrumb__inner-text">页面2</span></span></span><span class="t-breadcrumb__separator">&gt;&gt;</span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:160"><span class="t-breadcrumb__inner-text">页面3</span></span></span><span class="t-breadcrumb__separator">&gt;&gt;</span></div></div><div class="t-breadcrumb"><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:150"><span class="t-breadcrumb__inner-text">页面1</span></span></span><span class="t-breadcrumb__separator">/////</span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:150"><span class="t-breadcrumb__inner-text">页面2</span></span></span><span class="t-breadcrumb__separator">/////</span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:160"><span class="t-breadcrumb__inner-text">页面3</span></span></span><span class="t-breadcrumb__separator">/////</span></div></div>"`;
 
+exports[`ssr snapshot test > ssr test packages/components/breadcrumb/_example/custom-ellipsis.tsx 1`] = `"<div class="t-breadcrumb"><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面1</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面2</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class=""><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text"><button type="button" class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-ellipsis"><path fill="currentColor" d="M3 10.5H6V13.5H3V10.5ZM10.5 10.5H13.5V13.5H10.5V10.5ZM18 10.5H21V13.5H18V10.5Z"></path></svg></button></span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面5</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div></div><div class="t-breadcrumb"><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面1</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面2</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class=""><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text"><button type="button" class="t-button t-button--theme-default t-button--variant-text t-button--shape-square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-ellipsis"><path fill="currentColor" d="M3 10.5H6V13.5H3V10.5ZM10.5 10.5H13.5V13.5H10.5V10.5ZM18 10.5H21V13.5H18V10.5Z"></path></svg></button></span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面5</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div></div>"`;
+
+exports[`ssr snapshot test > ssr test packages/components/breadcrumb/_example/ellipsis.tsx 1`] = `"<div class="t-breadcrumb"><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面1</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面2</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class=""><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-ellipsis"><path fill="currentColor" d="M3 10.5H6V13.5H3V10.5ZM10.5 10.5H13.5V13.5H10.5V10.5ZM18 10.5H21V13.5H18V10.5Z"></path></svg></span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面5</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div></div><div class="t-breadcrumb"><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面1</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面2</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class=""><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-ellipsis"><path fill="currentColor" d="M3 10.5H6V13.5H3V10.5ZM10.5 10.5H13.5V13.5H10.5V10.5ZM18 10.5H21V13.5H18V10.5Z"></path></svg></span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><span class="t-breadcrumb__inner-text">页面5</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div></div>"`;
+
 exports[`ssr snapshot test > ssr test packages/components/breadcrumb/_example/href.tsx 1`] = `"<div><div class="t-breadcrumb"><div class="t-breadcrumb__item"><a class="t-breadcrumb--text-overflow t-link" href="/" target="_blank"><span class="t-breadcrumb__inner" style="max-width:150"><span class="t-breadcrumb__inner-text">页面1</span></span></a><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow t-is-disabled"><span class="t-breadcrumb__inner" style="max-width:150"><span class="t-breadcrumb__inner-text">页面2</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:160"><span class="t-breadcrumb__inner-text">页面3</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div></div><div style="margin-top:20px">点击计数器：<!-- -->0</div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/breadcrumb/_example/icon.tsx 1`] = `"<div class="t-breadcrumb"><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-bookmark"><path fill="currentColor" d="M4 3H20V22.9432L12 17.2289L4 22.9432V3ZM6 5V19.0568L12 14.7711L18 19.0568V5H6Z"></path></svg><span class="t-breadcrumb__inner-text">页面1</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-bookmark"><path fill="currentColor" d="M4 3H20V22.9432L12 17.2289L4 22.9432V3ZM6 5V19.0568L12 14.7711L18 19.0568V5H6Z"></path></svg><span class="t-breadcrumb__inner-text">页面2</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div><div class="t-breadcrumb__item"><span class="t-breadcrumb--text-overflow"><span class="t-breadcrumb__inner" style="max-width:120px"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-bookmark"><path fill="currentColor" d="M4 3H20V22.9432L12 17.2289L4 22.9432V3ZM6 5V19.0568L12 14.7711L18 19.0568V5H6Z"></path></svg><span class="t-breadcrumb__inner-text">页面3</span></span></span><span class="t-breadcrumb__separator"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="opacity:.5"><path fill="currentColor" d="M8.08594 17.5L13.5859 12L8.08594 6.50003L9.50015 5.08582L16.4144 12L9.50015 18.9142L8.08594 17.5Z"></path></svg></span></div></div>"`;


Reviews:
user: login: Wesley-0808
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-05T16:16:19Z
user: login: moecasts
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-06T13:09:35Z
user: login: moecasts
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-06T13:25:28Z
user: login: uyarn
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-08T07:01:21Z

Review comments:
diff_hunk: @@ -37,12 +43,74 @@ const Breadcrumb = forwardRefWithStatics(
             separator={separator}
             maxItemWidth={maxItemWidth}
             icon={option.icon}
+            content={option.content}
           >
             {option.content || option.children}
           </BreadcrumbItem>
         );
       });
-    }
+    }, [maxItemWidth, separator]);
+
+    const renderEllipsis = useCallback((items: TdBreadcrumbItemProps[]) => {
+      if (!ellipsis) {
+        return <EllipsisIcon />;
+      }
+
+      if (isFunction(ellipsis)) {
+        return ellipsis({items, separator});
+      }
+
+      return ellipsis;
+    }, [ellipsis, separator]);
+
+    const content = useMemo(() => {
+      let items = renderOptionsToItems(options) || Children.toArray(children);
+
+      const itemsCount = items?.length || 0;
+
+      if (!items || !maxItems) {
+        return items;
+      }
+
+      if (maxItems >= itemsCount) {
+        return items;
+      }
+
+      // 配置有误的情况，不显示省略并告警
+      if (
+        maxItems &&
+        (!itemsBeforeCollapse || !itemsAfterCollapse)
+      ) {
+        log.error('Breadcrumb', '需要设置 itemsBeforeCollapse 和 itemsAfterCollapse 属性来控制省略号前后的显示项数。');
+        return items;
+      }
+
+      if (
+        maxItems &&
+        (itemsAfterCollapse || 0) + (itemsBeforeCollapse || 0) >= maxItems
+      ) {
+        log.error('Breadcrumb', `maxItems={${maxItems}} 必须大于 itemsBeforeCollapse={${itemsBeforeCollapse}} + itemsAfterCollapse={${itemsAfterCollapse}}`);
path: packages/components/breadcrumb/Breadcrumb.tsx
user: login: Wesley-0808
body: 必须大于 => 必须大于或等于
created_at: 2025-04-05T16:02:56Z
author_association: CONTRIBUTOR
diff_hunk: @@ -37,12 +43,74 @@ const Breadcrumb = forwardRefWithStatics(
             separator={separator}
             maxItemWidth={maxItemWidth}
             icon={option.icon}
+            content={option.content}
           >
             {option.content || option.children}
           </BreadcrumbItem>
         );
       });
-    }
+    }, [maxItemWidth, separator]);
+
+    const renderEllipsis = useCallback((items: TdBreadcrumbItemProps[]) => {
+      if (!ellipsis) {
+        return <EllipsisIcon />;
+      }
+
+      if (isFunction(ellipsis)) {
+        return ellipsis({items, separator});
+      }
+
+      return ellipsis;
+    }, [ellipsis, separator]);
+
+    const content = useMemo(() => {
+      let items = renderOptionsToItems(options) || Children.toArray(children);
+
+      const itemsCount = items?.length || 0;
+
+      if (!items || !maxItems) {
+        return items;
+      }
+
+      if (maxItems >= itemsCount) {
+        return items;
+      }
+
+      // 配置有误的情况，不显示省略并告警
+      if (
+        maxItems &&
+        (!itemsBeforeCollapse || !itemsAfterCollapse)
+      ) {
+        log.error('Breadcrumb', '需要设置 itemsBeforeCollapse 和 itemsAfterCollapse 属性来控制省略号前后的显示项数。');
+        return items;
+      }
+
+      if (
+        maxItems &&
+        (itemsAfterCollapse || 0) + (itemsBeforeCollapse || 0) >= maxItems
+      ) {
+        log.error('Breadcrumb', `maxItems={${maxItems}} 必须大于 itemsBeforeCollapse={${itemsBeforeCollapse}} + itemsAfterCollapse={${itemsAfterCollapse}}`);
path: packages/components/breadcrumb/Breadcrumb.tsx
user: login: Wesley-0808
body: 这个判断我原本做了，但有一种情况：
面包屑共有8项，设置大于5项时显示省略`maxItems`，显示省略号前`itemsBeforeCollapse`3项，显示省略号后`itemsBeforeCollapse`3项，根据这个判断规则就会报错且不显示省略。
后面看了看heroui那边的实现，就换成了`totalItems`且不进行报错，也就是你这里的`itemsCount`。
[SeeThisFile](https://github.com/Tencent/tdesign-vue-next/pull/5261/files#diff-3890bd9822890c4dee044ef300e3aba6fe076e4b264db312e5a41f1de3d54a88) Line 32
created_at: 2025-04-05T16:15:32Z
author_association: CONTRIBUTOR
diff_hunk: @@ -37,12 +43,74 @@ const Breadcrumb = forwardRefWithStatics(
             separator={separator}
             maxItemWidth={maxItemWidth}
             icon={option.icon}
+            content={option.content}
           >
             {option.content || option.children}
           </BreadcrumbItem>
         );
       });
-    }
+    }, [maxItemWidth, separator]);
+
+    const renderEllipsis = useCallback((items: TdBreadcrumbItemProps[]) => {
+      if (!ellipsis) {
+        return <EllipsisIcon />;
+      }
+
+      if (isFunction(ellipsis)) {
+        return ellipsis({items, separator});
+      }
+
+      return ellipsis;
+    }, [ellipsis, separator]);
+
+    const content = useMemo(() => {
+      let items = renderOptionsToItems(options) || Children.toArray(children);
+
+      const itemsCount = items?.length || 0;
+
+      if (!items || !maxItems) {
+        return items;
+      }
+
+      if (maxItems >= itemsCount) {
+        return items;
+      }
+
+      // 配置有误的情况，不显示省略并告警
+      if (
+        maxItems &&
+        (!itemsBeforeCollapse || !itemsAfterCollapse)
+      ) {
+        log.error('Breadcrumb', '需要设置 itemsBeforeCollapse 和 itemsAfterCollapse 属性来控制省略号前后的显示项数。');
+        return items;
+      }
+
+      if (
+        maxItems &&
+        (itemsAfterCollapse || 0) + (itemsBeforeCollapse || 0) >= maxItems
+      ) {
+        log.error('Breadcrumb', `maxItems={${maxItems}} 必须大于 itemsBeforeCollapse={${itemsBeforeCollapse}} + itemsAfterCollapse={${itemsAfterCollapse}}`);
path: packages/components/breadcrumb/Breadcrumb.tsx
user: login: moecasts
body: 看要怎么理解吧，我想的是把省略号也当做一项的，`itemsBeforeCollapse + itemsAfterCollapse = maxItems` 的时候，加上省略号会变成 `maxItems + 1` 项的。

不过是小问题，只要统一了就好，我晚点改成省略号不计数的。


created_at: 2025-04-06T13:09:35Z
author_association: COLLABORATOR
diff_hunk: @@ -37,12 +43,74 @@ const Breadcrumb = forwardRefWithStatics(
             separator={separator}
             maxItemWidth={maxItemWidth}
             icon={option.icon}
+            content={option.content}
           >
             {option.content || option.children}
           </BreadcrumbItem>
         );
       });
-    }
+    }, [maxItemWidth, separator]);
+
+    const renderEllipsis = useCallback((items: TdBreadcrumbItemProps[]) => {
+      if (!ellipsis) {
+        return <EllipsisIcon />;
+      }
+
+      if (isFunction(ellipsis)) {
+        return ellipsis({items, separator});
+      }
+
+      return ellipsis;
+    }, [ellipsis, separator]);
+
+    const content = useMemo(() => {
+      let items = renderOptionsToItems(options) || Children.toArray(children);
+
+      const itemsCount = items?.length || 0;
+
+      if (!items || !maxItems) {
+        return items;
+      }
+
+      if (maxItems >= itemsCount) {
+        return items;
+      }
+
+      // 配置有误的情况，不显示省略并告警
+      if (
+        maxItems &&
+        (!itemsBeforeCollapse || !itemsAfterCollapse)
+      ) {
+        log.error('Breadcrumb', '需要设置 itemsBeforeCollapse 和 itemsAfterCollapse 属性来控制省略号前后的显示项数。');
+        return items;
+      }
+
+      if (
+        maxItems &&
+        (itemsAfterCollapse || 0) + (itemsBeforeCollapse || 0) >= maxItems
+      ) {
+        log.error('Breadcrumb', `maxItems={${maxItems}} 必须大于 itemsBeforeCollapse={${itemsBeforeCollapse}} + itemsAfterCollapse={${itemsAfterCollapse}}`);
path: packages/components/breadcrumb/Breadcrumb.tsx
user: login: moecasts
body: 改了
created_at: 2025-04-06T13:25:28Z
author_association: COLLABORATOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-04-04T15:53:05Z
body: <a href="https://preview-pr-3487-tdesign-react.surge.sh"><img height="96" alt="完成" src="https://user-images.githubusercontent.com/15634204/150816437-9f5bb788-cd67-4cbc-9897-b82d74e9aa65.png" /></a>
<!-- [工作流地址](https://github.com/Tencent/tdesign-react/actions/runs/14293110973) -->
<!-- AUTO_PREVIEW_HOOK -->
<!-- AUTO_PREVIEW_HOOK -->
author_association: CONTRIBUTOR
user: login: liweijie0812
created_at: 2025-04-05T07:17:32Z
body: /update-common
author_association: COLLABORATOR
user: login: pkg-pr-new[bot]
created_at: 2025-04-05T07:22:52Z
body: 
[Open in StackBlitz](https://pkg.pr.new/template/348598c9-d3fc-4ba4-9300-a5657f9b3ff7)


```
npm i https://pkg.pr.new/tdesign-react@3487
```


_commit: <a href="https://github.com/Tencent/tdesign-react/runs/40056863739"><code>836a5fc</code></a>_

author_association: NONE
user: login: liweijie0812
created_at: 2025-04-05T08:26:21Z
body: 你子仓的 commit id 指向有问题，我帮你更正了，又被你用git push 强制推送覆盖了
author_association: COLLABORATOR
user: login: moecasts
created_at: 2025-04-06T13:26:49Z
body: > 你子仓的 commit id 指向有问题，我帮你更正了，又被你用git push 强制推送覆盖了

问了下 uyarn，说是在 common 那边提 cr，这边在同步，就想着等合了重新弄了，commit 干净些。。。
author_association: COLLABORATOR