antd Tooltip 换行问题

7,188 阅读1分钟

需求背景: 描述内容过长,并且分类了,期望最终显示可以换行。

问题原因:Antd Tooltip 没有支持换行的api,当用户传过来的title值是string类型,它无法换行。

解决办法: 将需要换行的文字段由字符串转化成html,这样就可以处理换行。

举例:

没有换行

image.png

const {  Tooltip  } = antd;

ReactDOM.render(
  <Tooltip title="一去二三里,烟村四五家。亭台六七座,八九十枝花。">
    <span>Tooltip will show on mouse enter.</span>
  </Tooltip>,
  mountNode,
);
换行

image.png

const {  Tooltip  } = antd;

ReactDOM.render(
  <Tooltip title={(<span> 一去二三里,烟村四五家。<br/>亭台六七座,八九十枝花。</span>)}>
    <span>Tooltip will show on mouse enter.</span>
  </Tooltip>,
  mountNode,
);

解决要点:将字符串转化成html

desc: string | string[];

let title = Array.isArray(desc) ? desc.map(de => {
    return (<span>{de}<br /></span>)
}): desc;