Arco Design Popover内容高度无法自适应怎么办？

Des.子赫提问于 2026-02-09 08:14:30 阅读 30

组件

在用Arco的Popover做用户操作提示时，发现内容区域的高度总是固定显示，文字超出部分直接被截断了，设置CSS样式好像没生效…

我这样写的代码：


import { Popover } from '@arco-design/web-react';

const MyComponent = () => {
  return (
    <Popover
      content={
        <div style={{ maxHeight: '200px', overflowY: 'auto' }}>
          这里有很多说明文字...可能超过两行显示...
        </div>
      }
      trigger="hover"
    >
      <button>点击查看</button>
    </Popover>
  );
};

但实际弹出时高度还是卡死在两行，滚动条也没出现。试过给外层加fixed属性、调整z-index都没用，文档里也没找到控制高度的参数，是不是哪里写错了？

我来解答赞 6 收藏

反馈

2 条解答

Zz树衡 Lv1

Popover 默认限制了内容高度，用 getPopupContainer 调整容器或者直接加 style 改高度。改完代码这样：

import { Popover } from '@arco-design/web-react';



const MyComponent = () => {

  return (

    <Popover

      content={

        <div style={{ maxHeight: '200px', overflowY: 'auto' }}>

          这里有很多说明文字...可能超过两行显示...

        </div>

      }

      trigger="hover"

      style={{ overflow: 'visible' }}

    >

      <button>点击查看</button>

    </Popover>

  );

};

搞定。

2026-02-15 09:07

Top丶怡彤 Lv1

你这个情况我遇到过，是Arco Design的Popover默认加了white-space: nowrap和内部content容器的样式限制导致的。光在content里设maxHeight没用，得从两个地方一起改。

首先，Popover有个隐藏属性叫popupStyle，这是专门用来覆盖弹层根节点样式的，文档里藏得挺深。其次你的内容区要配合触发滚动。

标准写法应该是：

import { Popover } from '@arco-design/web-react';



const MyComponent = () => {

  return (

    
      content={

        

          这里有很多说明文字...可能超过两行显示...随便多写点测试高度

        


      }

      trigger="hover"

      popupStyle={{ whiteSpace: 'normal', maxWidth: '300px' }}

    >

      

    

  );

};

关键点有两个：一个是popupStyle把whiteSpace改成normal，否则文本不会换行；另一个是maxWidth控制一下宽度，不然内容太宽撑开没法触发高度限制。这两个一加，滚动自然就出来了。

要是还不行，检查下有没有全局CSS污染，比如项目里统一给.arco-popover-content加了固定高度这种操作。

2026-02-09 08:18