我使用库:https://www.npmjs.com/package/react-tooltip
。我有一个太长的文本,在一行上,如何将它放在多行上?
<p data-tip="hello world">Tooltip</p>
<ReactTooltip className="tooltip"/>
.tooltip {
width: 100px;
}
最佳答案
您可以使用 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
关于javascript - 在 `react-tooltip` 中多行显示文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57803271/