diff --git a/packages/devui-vue/devui/checkbox/src/checkbox.scss b/packages/devui-vue/devui/checkbox/src/checkbox.scss
index ed3ed978d0..5ce3a58493 100644
--- a/packages/devui-vue/devui/checkbox/src/checkbox.scss
+++ b/packages/devui-vue/devui/checkbox/src/checkbox.scss
@@ -180,7 +180,8 @@ $checkbox-label-height-map: (
     cursor: pointer;
     color: $devui-text;
     margin: 0;
-    display: block;
+    display: flex;
+    align-items: center;
     @each $size in ('lg', 'md', 'sm') {
       &.#{$devui-prefix}-checkbox--#{$size} {
         display: flex;
@@ -213,7 +214,19 @@ $checkbox-label-height-map: (
       display: inline-block;
       box-sizing: content-box;
       vertical-align: top;
+
+      &.#{$devui-prefix}-checkbox__material {
+        flex-shrink: 0; // keep the checkbox icon width
+      }
+
+      &.#{$devui-prefix}-checkbox__label-text {
+        flex-shrink: 1; // just use flex box to shrink text width. let text ellipsis
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
+
   }
 
   // 禁用状态透明色
diff --git a/packages/devui-vue/devui/checkbox/src/checkbox.tsx b/packages/devui-vue/devui/checkbox/src/checkbox.tsx
index d950415082..2c75365c0f 100644
--- a/packages/devui-vue/devui/checkbox/src/checkbox.tsx
+++ b/packages/devui-vue/devui/checkbox/src/checkbox.tsx
@@ -89,7 +89,7 @@ export default defineComponent({
                   </g>
                 </svg>
               </span>
-              {props.label || ctx.slots.default?.()}
+              <span class={ns.e('label-text')}>{props.label || ctx.slots.default?.()}</span>
             </label>
           </div>
         </div>
diff --git a/packages/devui-vue/devui/transfer/__tests__/transfer.spec.ts b/packages/devui-vue/devui/transfer/__tests__/transfer.spec.ts
index 134d4a684c..92284d3978 100644
--- a/packages/devui-vue/devui/transfer/__tests__/transfer.spec.ts
+++ b/packages/devui-vue/devui/transfer/__tests__/transfer.spec.ts
@@ -223,7 +223,10 @@ describe('d-transfer', () => {
       setTimeout(resolve, 500);
     });
     const firstCheckbox = wrapper.find(`${sourceClass} ${bodyClass} .devui-checkbox`);
-    expect(firstCheckbox.text()).toBe('北京北京');
-    expect(firstCheckbox.findAll('span')[2].attributes().style).toBe('color: rgb(94, 124, 224);');
+    const firstCheckboxTextLabel = firstCheckbox.find('.devui-checkbox__label-text span'); // the text element
+    expect(firstCheckboxTextLabel.text()).toBe('北京北京');
+
+    // check the checkbox props —— renderContent: h('span', { style: { color: '#5e7ce0' } }, [option.value, option.name])
+    expect(firstCheckboxTextLabel.attributes().style).toBe('color: rgb(94, 124, 224);');
   });
 });