diff --git a/.changeset/kind-yaks-talk.md b/.changeset/kind-yaks-talk.md
new file mode 100644
index 000000000..cc7db90c2
--- /dev/null
+++ b/.changeset/kind-yaks-talk.md
@@ -0,0 +1,7 @@
+---
+"@hi-ui/check-cascader": minor
+"@hi-ui/check-select": minor
+"@hi-ui/check-tree-select": minor
+---
+
+feat: 增加 tagInputProps API,支持显示内容高度自适应
diff --git a/.changeset/silent-timers-juggle.md b/.changeset/silent-timers-juggle.md
new file mode 100644
index 000000000..92419bf06
--- /dev/null
+++ b/.changeset/silent-timers-juggle.md
@@ -0,0 +1,6 @@
+---
+"@hi-ui/hiui": patch
+---
+
+- CheckSelect CheckCascader CheckTreeSelect feat: 增加 tagInputProps API,支持显示内容高度自适应
+- Popper TagInput fix: 优化 wrap 模式下代码
diff --git a/.changeset/soft-rockets-brake.md b/.changeset/soft-rockets-brake.md
new file mode 100644
index 000000000..f6b038c68
--- /dev/null
+++ b/.changeset/soft-rockets-brake.md
@@ -0,0 +1,6 @@
+---
+"@hi-ui/popper": patch
+"@hi-ui/tag-input": patch
+---
+
+优化 wrap 模式下代码
diff --git a/packages/ui/check-cascader/src/CheckCascader.tsx b/packages/ui/check-cascader/src/CheckCascader.tsx
index 52fb1d27e..82220dd58 100644
--- a/packages/ui/check-cascader/src/CheckCascader.tsx
+++ b/packages/ui/check-cascader/src/CheckCascader.tsx
@@ -68,6 +68,7 @@ export const CheckCascader = forwardRef<HTMLDivElement | null, CheckCascaderProp
       visible,
       onOpen,
       onClose,
+      tagInputProps,
       ...rest
     },
     ref
@@ -223,6 +224,7 @@ export const CheckCascader = forwardRef<HTMLDivElement | null, CheckCascaderProp
         onSearch={callAllFuncs(onSearchProp, onSearch)}
         trigger={
           <TagInputMock
+            {...tagInputProps}
             clearable={clearable}
             placeholder={placeholder}
             // @ts-ignore
@@ -363,6 +365,10 @@ export interface CheckCascaderProps extends Omit<PickerProps, 'trigger' | 'scrol
    * SEPARATE：父子完全独立受控
    */
   checkedMode?: 'PARENT' | 'CHILD' | 'ALL' | 'SEPARATE'
+  /**
+   * TagInput 参数设置
+   */
+  tagInputProps?: TagInputMockProps
 }
 
 if (__DEV__) {
diff --git a/packages/ui/check-cascader/stories/index.stories.tsx b/packages/ui/check-cascader/stories/index.stories.tsx
index 935a69b15..2b4c52c33 100644
--- a/packages/ui/check-cascader/stories/index.stories.tsx
+++ b/packages/ui/check-cascader/stories/index.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import CheckCascader from '../src'
 
 export * from './basic.stories'
+export * from './tag-input-wrap.stories'
 export * from './disabled.stories'
 export * from './search.stories'
 export * from './select-change.stories'
diff --git a/packages/ui/check-cascader/stories/tag-input-wrap.stories.tsx b/packages/ui/check-cascader/stories/tag-input-wrap.stories.tsx
new file mode 100644
index 000000000..8630ee116
--- /dev/null
+++ b/packages/ui/check-cascader/stories/tag-input-wrap.stories.tsx
@@ -0,0 +1,97 @@
+import React from 'react'
+import CheckCascader from '../src'
+
+/**
+ * @title 换行展示选中内容
+ * @desc 设置后，选中内容超出宽度时会换行展示
+ */
+export const TagInputWrap = () => {
+  const [dataOnlyLeafCheckable] = React.useState(() => {
+    const data = [
+      {
+        id: '手机',
+        title: '手机t',
+        children: [
+          {
+            id: '小米',
+            title: '小米t',
+            children: [
+              {
+                id: '小米3',
+                title: '小米3t',
+              },
+              {
+                id: '小米4',
+                title: '小米4t',
+              },
+            ],
+          },
+          {
+            id: '红米',
+            title: '红米t',
+            children: [
+              {
+                id: '红米3',
+                title: '红米3t',
+              },
+              {
+                id: '红米4',
+                title: '红米4t',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: '电视',
+        title: '电视t',
+        children: [
+          {
+            id: '小米电视4A',
+            title: '小米电视4At',
+          },
+          {
+            id: '小米电视4C',
+            title: '小米电视4Ct',
+          },
+        ],
+      },
+    ]
+
+    const getDataOnlyLeafCheckable = (data: any) => {
+      return data.map((item: any) => {
+        if (item.children) {
+          item.checkable = item.checkable ?? false
+          item.children = getDataOnlyLeafCheckable(item.children)
+        }
+
+        return item
+      })
+    }
+
+    const dataOnlyLeafCheckable = getDataOnlyLeafCheckable(data)
+
+    return dataOnlyLeafCheckable
+  })
+
+  return (
+    <>
+      <h1>换行展示选中内容</h1>
+      <div className="cascader-tag-input-wrap__wrap">
+        <CheckCascader
+          style={{ width: 240 }}
+          searchable={false}
+          // clearable
+          placeholder="请选择品类"
+          defaultValue={[['手机', '红米', '红米4']]}
+          changeOnSelect
+          data={dataOnlyLeafCheckable}
+          onChange={console.log}
+          tagInputProps={{
+            wrap: true,
+          }}
+        ></CheckCascader>
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/check-select/src/CheckSelect.tsx b/packages/ui/check-select/src/CheckSelect.tsx
index 2122904af..224765d73 100644
--- a/packages/ui/check-select/src/CheckSelect.tsx
+++ b/packages/ui/check-select/src/CheckSelect.tsx
@@ -13,7 +13,7 @@ import {
 } from './types'
 import { useLatestRef } from '@hi-ui/use-latest'
 import Checkbox from '@hi-ui/checkbox'
-import { TagInputMock } from '@hi-ui/tag-input'
+import { TagInputMock, TagInputMockProps } from '@hi-ui/tag-input'
 import { isFunction, isArrayNonEmpty, isUndef } from '@hi-ui/type-assertion'
 import VirtualList, { ListRef, useCheckInVirtual } from '@hi-ui/virtual-list'
 import { Picker, PickerProps } from '@hi-ui/picker'
@@ -73,6 +73,7 @@ export const CheckSelect = forwardRef<HTMLDivElement | null, CheckSelectProps>(
       onSearch: onSearchProp,
       fieldNames = DEFAULT_FIELD_NAMES,
       customRender,
+      tagInputProps,
       ...rest
     },
     ref
@@ -271,6 +272,7 @@ export const CheckSelect = forwardRef<HTMLDivElement | null, CheckSelectProps>(
               )
             ) : (
               <TagInputMock
+                {...tagInputProps}
                 clearable={clearable}
                 placeholder={placeholder}
                 // @ts-ignore
@@ -451,6 +453,10 @@ export interface CheckSelectProps
    * 自定义渲染选中的内容
    */
   customRender?: React.ReactNode | ((option: CheckSelectItemEventData[]) => React.ReactNode)
+  /**
+   * TagInput 参数设置
+   */
+  tagInputProps?: TagInputMockProps
 }
 
 // @ts-ignore
diff --git a/packages/ui/check-select/stories/index.stories.tsx b/packages/ui/check-select/stories/index.stories.tsx
index bd512889c..4d4f52e92 100644
--- a/packages/ui/check-select/stories/index.stories.tsx
+++ b/packages/ui/check-select/stories/index.stories.tsx
@@ -5,6 +5,7 @@ export * from './basic.stories'
 export * from './controlled.stories'
 export * from './uncontrolled.stories'
 export * from './clearable.stories'
+export * from './tag-input-wrap.stories'
 export * from './appearance.stories'
 export * from './disabled.stories'
 export * from './group.stories'
diff --git a/packages/ui/check-select/stories/tag-input-wrap.stories.tsx b/packages/ui/check-select/stories/tag-input-wrap.stories.tsx
new file mode 100644
index 000000000..3ce7f4a89
--- /dev/null
+++ b/packages/ui/check-select/stories/tag-input-wrap.stories.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import CheckSelect from '../src'
+
+/**
+ * @title 换行展示选中内容
+ * @desc 设置后，选中内容超出宽度时会换行展示
+ */
+export const TagInputWrap = () => {
+  const [data] = React.useState([
+    { title: '手机', id: '2' },
+    { title: '小米2', id: '2-1' },
+    { title: '小米3', id: '2-2' },
+    { title: '小米4', id: '2-3' },
+    { title: '小米5', id: '2-4' },
+    { title: '电脑', id: '3' },
+    { title: '笔记本', id: '4' },
+    {
+      title: '生活周边超长文案展示超长文案展示超长文案展示超长文案展示超长文案展示',
+      id: '5',
+    },
+    { title: '其它', id: '6' },
+  ])
+
+  return (
+    <>
+      <h1>换行展示选中内容</h1>
+      <div className="check-select-tag-input-wrap__wrap">
+        <CheckSelect
+          style={{ width: 240 }}
+          placeholder="请选择"
+          searchable
+          clearable
+          data={data}
+          tagInputProps={{
+            wrap: true,
+          }}
+        />
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/check-tree-select/src/CheckTreeSelect.tsx b/packages/ui/check-tree-select/src/CheckTreeSelect.tsx
index fee75d488..d9ea5fb66 100644
--- a/packages/ui/check-tree-select/src/CheckTreeSelect.tsx
+++ b/packages/ui/check-tree-select/src/CheckTreeSelect.tsx
@@ -15,7 +15,7 @@ import { baseFlattenTree } from '@hi-ui/tree-utils'
 import { isArrayNonEmpty, isUndef } from '@hi-ui/type-assertion'
 import { uniqBy } from '@hi-ui/array-utils'
 import { Highlighter } from '@hi-ui/highlighter'
-import { TagInputMock } from '@hi-ui/tag-input'
+import { TagInputMock, TagInputMockProps } from '@hi-ui/tag-input'
 import { UpOutlined, DownOutlined } from '@hi-ui/icons'
 import { useLocaleContext } from '@hi-ui/core'
 import { callAllFuncs } from '@hi-ui/func-utils'
@@ -88,6 +88,7 @@ export const CheckTreeSelect = forwardRef<HTMLDivElement | null, CheckTreeSelect
       itemHeight,
       height,
       showCheckAll,
+      tagInputProps,
       ...rest
     },
     ref
@@ -343,6 +344,7 @@ export const CheckTreeSelect = forwardRef<HTMLDivElement | null, CheckTreeSelect
         loading={rest.loading !== undefined ? rest.loading : loading}
         trigger={
           <TagInputMock
+            {...tagInputProps}
             // ref={targetElementRef}
             // onClick={openMenu}
             // disabled={disabled}
@@ -525,6 +527,10 @@ export interface CheckTreeSelectProps
    * 是否开启全选功能，需要对数据全量操作。异步数据场景暂不支持，可自行渲染弹层底部实现
    */
   showCheckAll?: boolean
+  /**
+   * TagInput 参数设置
+   */
+  tagInputProps?: TagInputMockProps
 }
 
 if (__DEV__) {
diff --git a/packages/ui/check-tree-select/stories/index.stories.tsx b/packages/ui/check-tree-select/stories/index.stories.tsx
index a4277b373..251429501 100644
--- a/packages/ui/check-tree-select/stories/index.stories.tsx
+++ b/packages/ui/check-tree-select/stories/index.stories.tsx
@@ -4,6 +4,7 @@ import CheckTreeSelect from '../src'
 export * from './basic.stories'
 export * from './controlled.stories'
 export * from './uncontrolled.stories'
+export * from './tag-input-wrap.stories'
 export * from './appearance.stories'
 export * from './clearable.stories'
 export * from './searchable.stories'
diff --git a/packages/ui/check-tree-select/stories/tag-input-wrap.stories.tsx b/packages/ui/check-tree-select/stories/tag-input-wrap.stories.tsx
new file mode 100644
index 000000000..bea36df25
--- /dev/null
+++ b/packages/ui/check-tree-select/stories/tag-input-wrap.stories.tsx
@@ -0,0 +1,105 @@
+import React from 'react'
+import CheckTreeSelect from '../src'
+
+/**
+ * @title 换行展示选中内容
+ * @desc 设置后，选中内容超出宽度时会换行展示
+ */
+export const TagInputWrap = () => {
+  const [data] = React.useState([
+    {
+      title: '手机类',
+      id: '0',
+      children: [
+        {
+          title: 'Redmi系列',
+          id: '0-0',
+          disabled: true,
+          children: [
+            {
+              id: '0-0-1',
+              title: 'Redmi K30',
+            },
+            {
+              id: '0-0-2',
+              title: 'Redmi K30 Pro',
+            },
+            {
+              id: '0-0-3',
+              title: 'Redmi 10X 5G',
+            },
+            {
+              id: '0-0-4',
+              title: 'Redmi Note 8',
+            },
+            {
+              id: '0-0-5',
+              title: 'Redmi 9',
+            },
+            {
+              id: '0-0-6',
+              title: 'Redmi 9A',
+            },
+          ],
+        },
+        {
+          title: '小米手机',
+          id: '0-1',
+          children: [
+            {
+              id: '0-1-1',
+              title: '小米10 Pro',
+            },
+            {
+              id: '0-1-2',
+              title: '小米10',
+            },
+            {
+              id: '0-1-3',
+              title: '小米10 青春版 5G',
+            },
+            {
+              id: '0-1-4',
+              title: '小米MIX Alpha',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: '电视',
+      id: '1',
+      children: [
+        {
+          title: '小米电视 大师 65英寸OLED',
+          id: '1-0',
+        },
+        {
+          title: 'Redmi 智能电视 MAX 98',
+          id: '1-1',
+        },
+        {
+          title: '小米电视4A 60英寸',
+          id: '1-2',
+        },
+      ],
+    },
+  ])
+
+  return (
+    <>
+      <h1>换行展示选中内容</h1>
+      <div className="check-tree-select-tag-input-wrap__wrap">
+        <CheckTreeSelect
+          style={{ width: 240 }}
+          data={data}
+          checkedMode="PARENT"
+          onChange={console.log}
+          tagInputProps={{
+            wrap: true,
+          }}
+        />
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/check-tree-select/stories/virtual-list.stories.tsx b/packages/ui/check-tree-select/stories/virtual-list.stories.tsx
index fa763e5c7..9c0929f97 100644
--- a/packages/ui/check-tree-select/stories/virtual-list.stories.tsx
+++ b/packages/ui/check-tree-select/stories/virtual-list.stories.tsx
@@ -8,8 +8,8 @@ export const VirtualList = () => {
   const [data] = React.useState(() => {
     // 模拟 10^4 个数据量
     function dig(path = '0', level) {
-      const list = []
-      for (let i = 0; i < 10; i += 1) {
+      const list: any = []
+      for (let i = 0; i < 5; i += 1) {
         const id = `${path}-${i}`
         const treeNode = {
           title: id,
diff --git a/packages/ui/popper/src/use-popper.ts b/packages/ui/popper/src/use-popper.ts
index 05fff2284..1cf8b964c 100644
--- a/packages/ui/popper/src/use-popper.ts
+++ b/packages/ui/popper/src/use-popper.ts
@@ -1,4 +1,4 @@
-import React, { useRef, useState, useMemo, useLayoutEffect, useCallback } from 'react'
+import React, { useRef, useState, useMemo, useLayoutEffect, useCallback, useEffect } from 'react'
 import * as PopperJS from '@popperjs/core'
 import { createPopper } from '@popperjs/core'
 import { useLatestCallback, useLatestRef } from '@hi-ui/use-latest'
@@ -161,6 +161,21 @@ export const usePopper = ({
     }
   }, [nonInteractive, attachElement, popperElement, popperOptionsRef])
 
+  useEffect(() => {
+    let resizeObserver: ResizeObserver
+
+    if (attachElement) {
+      resizeObserver = new ResizeObserver(() => {
+        instanceRef.current?.update()
+      })
+      resizeObserver.observe(attachElement as Element)
+    }
+
+    return () => {
+      resizeObserver?.disconnect()
+    }
+  }, [attachElement])
+
   const onCloseLatest = useLatestCallback(() => {
     if (nonInteractive) return
     onClose?.()
diff --git a/packages/ui/tag-input/src/styles/tag-input-mock.scss b/packages/ui/tag-input/src/styles/tag-input-mock.scss
index 46e2daf8a..2da9037a5 100644
--- a/packages/ui/tag-input/src/styles/tag-input-mock.scss
+++ b/packages/ui/tag-input/src/styles/tag-input-mock.scss
@@ -41,6 +41,8 @@ $tag-input-mock-prefix: '#{$component-prefix}-tag-input-mock' !default;
   }
 
   &--wrap {
+    height: auto;
+
     .#{$tag-input-mock-prefix}__value {
       height: auto;
     }
@@ -189,7 +191,10 @@ $tag-input-mock-prefix: '#{$component-prefix}-tag-input-mock' !default;
 
   &--size {
     &-sm {
-      height: use-height-size(6);
+      &:not(.#{$tag-input-mock-prefix}--wrap) {
+        height: use-height-size(6);
+      }
+
       font-size: use-text-size('sm');
       line-height: use-text-lineheight('sm');
       border-radius: use-border-radius('normal');
@@ -204,7 +209,10 @@ $tag-input-mock-prefix: '#{$component-prefix}-tag-input-mock' !default;
     }
 
     &-md {
-      height: use-height-size(8);
+      &:not(.#{$tag-input-mock-prefix}--wrap) {
+        height: use-height-size(8);
+      }
+
       font-size: use-text-size('normal');
       line-height: use-text-lineheight('normal');
       border-radius: use-border-radius('normal');
@@ -212,7 +220,10 @@ $tag-input-mock-prefix: '#{$component-prefix}-tag-input-mock' !default;
     }
 
     &-lg {
-      height: use-height-size(10);
+      &:not(.#{$tag-input-mock-prefix}--wrap) {
+        height: use-height-size(10);
+      }
+
       font-size: use-text-size('lg');
       line-height: use-text-lineheight('lg');
       border-radius: use-border-radius('normal');