fix(card): The extra element and title ellipsis in the checkcard are …

…not functioning correctly when the title is too long
ant-design · Apr 24, 2024 · bf21788 · bf21788
1 parent ab422b6
commit bf21788
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/packages/card/src/components/CheckCard/index.tsx b/packages/card/src/components/CheckCard/index.tsx
@@ -291,7 +291,11 @@ const CheckCard: React.FC<CheckCardProps> & {
     const headerDom = (title ?? extra) != null && (
       <div className={classNames(`${prefixCls}-header`, hashId)}>
         <div className={classNames(`${prefixCls}-header-left`, hashId)}>
-          <div className={classNames(`${prefixCls}-title`, hashId)}>
+          <div
+            className={classNames(`${prefixCls}-title`, hashId, {
+              [`${prefixCls}-title-with-ellipsis`]: typeof title === 'string',
+            })}
+          >
             {title}
           </div>
           {props.subTitle ? (

diff --git a/packages/card/src/components/CheckCard/style.ts b/packages/card/src/components/CheckCard/style.ts
@@ -173,6 +173,7 @@ const genProStyle: GenerateStyle<ProListToken> = (token) => {
           display: 'flex',
           alignItems: 'center',
           gap: token.sizeSM,
+          minWidth: 0,
         },
       },
       '&-title': {
@@ -185,6 +186,9 @@ const genProStyle: GenerateStyle<ProListToken> = (token) => {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
+        '&-with-ellipsis': {
+          display: 'inline-block'
+        },
       },
       '&-description': {
         color: token.colorTextSecondary,