在“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;
}

来源 - 参考 1 参考 2

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

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);

玩转代码 -代码沙盒

Answer 2

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