Ant Design Tooltip 实现文字超出长度鼠标悬浮展示 - 完整代码示例

在 Ant Design 中，可以使用 Tooltip 组件来实现文字超出长度时鼠标悬浮展示全部文字的效果。\n\n首先，将需要展示的文字放入 Tooltip 组件中，并设置 tooltip 属性为文字内容。然后，通过 CSS 样式设置文字超出长度时的显示效果。当鼠标悬浮在文字上时，Tooltip 组件会自动展示全部文字。\n\n以下是一个示例代码：\n\njsx\nimport { Tooltip } from 'antd';\n\nconst TextOverflow = ({ text, length }) => {\n if (text.length > length) {\n return (\n <Tooltip title={text}>\n <span style={{ display: 'inline-block', maxWidth: `${length}em`, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>\n {text}\n </span>\n </Tooltip>\n );\n }\n return <span>{text}</span>;\n};\n\nexport default TextOverflow;\n\n\n在上面的代码中，TextOverflow 组件接受两个参数：text 表示需要展示的文字内容，length 表示文字的最大长度。如果文字长度超过最大长度，则使用 Tooltip 组件包裹文字，并设置 tooltip 属性为全部文字内容。同时，设置 span 标签的样式，使文字超出长度时显示为省略号。\n\n使用示例：\n\njsx\n<TextOverflow text="这是一段很长很长的文字内容，如果超出长度，则鼠标悬浮时会展示全部文字" length={10} />\n\n\n这样，当文字超出长度时，鼠标悬浮在文字上时会展示全部文字；当文字不超出长度时，则直接展示文字，不展示悬浮效果。