AntDesign Tooltip title 换行

今天药忘吃喽~ 2022-12-09 04:56 355阅读 0赞

官网相关配置项的说明：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center]  
就是说：`<Tooltip>`组件的`title`属性，值可以有三种类型：  
\- `string`  
\- `ReactNode`  
\- `() => ReactNode`

那么提示内容换行的方式显而易见：

**错误示范**：

<Tooltip title="第一行<br/>第二行\n第三行">
      <span>这是一段文本</span>
    </Tooltip>

在字符串对象中，无论是`\n`还是`<br/>`都会被当做普通字符输出。  
![在这里插入图片描述][20200921234320376.png_pic_center]

**正确示范**：

<Tooltip title={ <span>第一行<br/>第二行<br/>第三行</span>}>
      <span>这是一段文本</span>
    </Tooltip>

相当于：

let msgNode = (
      <span>
        第一行<br/>
        第二行<br/>
        第三行
      </span>
    );
    <Tooltip title={ msgNode}>
      <span>这是一段文本</span>
    </Tooltip>

使用JSX语法，用 `ReactNode` 对象赋值，此时`<br/>`表示换行。  
![在这里插入图片描述][20200921234225643.png_pic_center]

总之，要换行，就得返回标签代码块。而不是字符串`string`。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/c947cdb19be941f8ad752b6ba13d66bc.png
[20200921234320376.png_pic_center]: /images/20221123/9c8fa9c1aebe476abdd200d2290eec7c.png
[20200921234225643.png_pic_center]: /images/20221123/94f0d8a1834846cf8caacb440d7c909a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，355人围观）

还没有评论，来说两句吧...

相关阅读

相关 div、a等标签title属性的换行

1、换行代码符合分别为： “&\10;”和“&\13;” “&\10;”拼写： &（and符号，键盘数字键7一起&）+ \（井号）+ 10（阿拉伯数字十）+ ;（小写分

红太狼/ 2024年02月17日 15:17/ 0 赞/ 27 阅读

相关 Aspose.Cells 实现换行（手动换行、自动换行）

1 手动换行使用\\n实现手动换行 Workbook workbook=new Workbook(); WorkSheet worksheet=wor

素颜马尾好姑娘i/ 2023年10月05日 16:38/ 0 赞/ 67 阅读

相关 java换行(java换行代码)

搜狗问问-搜狗旗下最大互动问答社区 ![java换行(java换行代码)\_java换行(java换行代码)][java_java_java_java] 搜狗问问-搜

ゞ浴缸里的玫瑰/ 2023年09月25日 08:26/ 0 赞/ 64 阅读

相关 AntDesign Tooltip title 换行

官网相关配置项的说明： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

今天药忘吃喽~/ 2022年12月09日 04:56/ 0 赞/ 356 阅读

相关 antd Tooltip 中\n换行无效的问题

![字符串转数组][20200911183642530.png_pic_center] 先把获取到的数据转成数组 ![循环数组渲染标签][watermark_type_Z

悠悠/ 2022年12月06日 01:26/ 0 赞/ 344 阅读

相关 python加换行和去换行（去掉换行，end =““；加换行 ,‘/n‘）

去掉换行，end ="" 加换行 ,'/n' 文章目录去掉换行换行 ![在这里插入图片描述][watermark_

谁借莪１个温暖的怀抱￠/ 2022年09月11日 08:21/ 0 赞/ 210 阅读

相关 winform datagridview 可换行的tooltip

1.思路。为字符串添加“\\r\\n”以表示换行。可以根据字符串的总长度，以及每行几个字，可以确定行数。如图。是可换行tooltip ![tooltip.jpg][

梦里梦外;/ 2022年03月29日 18:08/ 0 赞/ 484 阅读

相关 HTML元素title里面如何换行

在调试代码的时候我就遇到一个问题，HTML元素title里面通常只显示一行，那我想要他换行，就是多行显示，如何实现？JS代码里面比如Alert里面又该如何换行？经过

快来打我*/ 2021年09月14日 09:46/ 0 赞/ 375 阅读

相关 CSS强制英文、中文换行与不换行强制英文换行

1. word-break:break-all;只对英文起作用，以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用，以单词作为

分手后的思念是犯贱/ 2021年09月12日 08:40/ 0 赞/ 525 阅读

相关 shell echo 换行不换行打印换行

换行与不换行 echo默认是有换行的， -n的时候，是不换行的, 看下man的介绍： ubuntu@VM-0-13-ubuntu:~$ man echo | g

秒速五厘米/ 2021年07月28日 15:11/ 0 赞/ 880 阅读