Semantic-UI：在工具提示中添加换行符答案

【问题标题】：Semantic-UI: Add line break in tooltipSemantic-UI：在工具提示中添加换行符
【发布时间】：2018-07-19 22:24:04
【问题描述】：

我想在我的工具提示中有换行符：

<span data:data-tooltip="line 1 ...\n 
                              line 2 ...">

我从这里尝试了几个建议： Add line break within tooltips

什么都没有。我在没有 Javascript (v.2.2) 的情况下使用它

【问题讨论】：

【解决方案1】：

这类似于@terraloader 的回答，但我想给它更多的上下文。

这是在语义 UI 工具提示中添加换行符的最佳非 JavaScript 解决方案。

将以下规则添加到您的样式表中：

[data-tooltip]::after {
    white-space: pre;
}

然后，在您的 data-tooltip 属性中，使用 &#xa; *

方法如下：

<span data-tooltip="If you want to remove&#xa;this item from the&#xa;list, click here.">
    <i class="red delete icon"></i>
</span>

_{* 这是 HTML 编码的换行符（使用十六进制值）。您还可以使用十进制表示法&#10;。无论哪种方式，它们在功能上都等同于 \n，它是换行符。}

【讨论】：

【解决方案2】：

因为我首先通过 google 找到了这个，所以很高兴完成：

您还可以将&#xa; 与white-space: pre; 结合使用，如下所述： CSS data attribute new line character & pseudo-element content value

【讨论】：

【解决方案3】：

您可以使用data-html 代替带有<br/> 标签的data-tooltip。

<div class="ui icon button" data-html="<p>First line <br/> Second line</p>">
  <i class="add icon"></i>
</div>

这个解决方案需要Javascript，见PEN

【讨论】：

【解决方案4】：

如果需要使用无JS版本的tooltip，可以调整tooltip的width，将white-space设置为normal。 PEN

【讨论】：