在``react tooltip`中多行显示文本

Question

我使用库：https://www.npmjs.com/package/react-tooltip。我有一个太长的文本，它在一行上，怎么能把它放在多行上呢？

<p data-tip="hello world">Tooltip</p>
<ReactTooltip className="tooltip"/>

.tooltip {
  width: 100px;
}

Answer 1

您可以使用html={true}或multiline={true}这两个属性来处理多行方案

html

var tooltiptest = 'this is <br /> a test';

<div data-tip={tooltiptest} data-for='path'>Path</div>

<ReactTooltip id='path' type='light' html={true} />

您的示例：

<p data-for='path' data-tip="hello <br /> world">Tooltip</p>
<ReactTooltip id='path' className="tooltip" html={true} />

.tooltip {
  width: 100px;
}

多行

<span data-tip='tooltip<br />multiline'></span>

<ReactTooltip multiline={true} />

你的例子

<p data-tip="hello <br /> world">Tooltip</p>
<ReactTooltip className="tooltip" multiline={true} />

.tooltip {
  width: 100px;
}

来源- reference1 reference2

如果您需要处理动态驱动内容的自动换行，请遵循以下样式。

​

​

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import ReactTooltip from "react-tooltip";

const styles = theme => ({
  overrideMe: {
    width: "100px",
    "word-break": "break-all",
    "overflow-wrap": "break-word",
    display: "block"
  }
});

class Opener extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }

  render() {
    const { classes } = this.props;
    return (
      <div>
        <div>test content</div>
        <div>test content</div>
        <div>
          <p
            data-for="tt"
            data-tip="hello ccsdcssd csdccdsc ccdc sdcscds world"
          >
            Tooltip - hover me
          </p>
          <ReactTooltip
            className={classes["overrideMe"]}
            data-html={true}
            insecure={true}
            multiline={true}
            id="tt"
          />
        </div>
      </div>
    );
  }
}

export default withStyles(styles)(Opener);

使用代码- code sandbox

Answer 2

如果设置组件或html元素的样式，请将white-space: pre-wrap;添加到css。