Question

我想在工具提示中设置换行符：

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

我从这里尝试了几个提案： Add line break within tooltips

没有做到这一点。我在没有Javascript（v.2.2）

的情况下使用它

Answer 1

如果您需要使用无JS版本的工具提示，则可以调整工具提示的width并将white-space设置为normal。 https://developer.mozilla.org/en-US/docs/Web/API/Event/Comparison_of_Event_Targets

Answer 2

您可以使用data-html代替data-tooltip <br/>代码。

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

此解决方案需要使用Javascript，请参阅PEN

Answer 3

这类似于@terraloader的答案，但我想为其提供更多上下文。

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

在样式表中添加以下规则：

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

然后，在您的data-tooltip属性中，使用
 *

方法如下：

<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编码的换行字符（使用十六进制值）。您也可以使用十进制表示法
。无论哪种方式，它们在功能上都等效于\n，即换行。}

Answer 4

因为我首先通过Google找到了它，所以很好完成：

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