如何在Material-UI中为ToolTip标题设置换行符 [英] How to make line break for ToolTip titles in Material-UI

问题描述

我正在使用ToolTip组件，我有两个标题文本，只是想知道是否可以将它们呈现为两行(每种语言在一行中)而不是一行?如何将期望的样式应用于此组件?

I am using the ToolTip component, I have two texts for the title, just wonder is that possible to render them as two lines (each language in one line) rather than one line? How can I apply the expected style to this component?

这是代码:

renderToolTip = tipText => {
    const { classes } = this.props;
    if (tipText) {
      return (
        <Tooltip
          title={tipText}
          placement="left"
          classes={{
            tooltip: classes.tooltip,
          }}>
          <IconButton>
            <InfoOutlined />
          </IconButton>
        </Tooltip>
      );
    }
    return null;
  };

languageList = ['English', 'Spanish']
languageList.map(language => this.renderToolTip(language));

预期:每个文本都使用换行符，有人可以帮忙吗?

Expected: line break for each text, Can anyone help?

推荐答案

您可以使用span包装标题，并为其添加样式，如下所示:

You can wrap your title with a span and add a style to it just like below:

<Tooltip
  title={<span style={{ whiteSpace: 'pre-line' }}>{tipText}</span>}
  placement="left"
  classes={{
    tooltip: classes.tooltip,
  }}>
    <IconButton>
      <InfoOutlined />
    </IconButton>
</Tooltip>

现在，当您的文本在任何地方包含\n时，它将断开该行.例如，您可以输入如下文本:

Now, when your text includes \n anywhere, it will break the line. For example you can have a text like the following:

Hey there,\nCome here

这将呈现为:

Hey there,
Come here

这篇关于如何在Material-UI中为ToolTip标题设置换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！