使用换行符打破 HTML 工具提示消息答案

【问题标题】：Break HTML tooltip message using line breaks使用换行符打破 HTML 工具提示消息
【发布时间】：2018-12-11 11:23:18
【问题描述】：

我试图破坏我在按钮 悬停按钮 中使用的自定义 HTML 工具提示。我尝试在打字稿中使用不同的方法（即/n、），因为它是添加换行符的自定义工具提示，但似乎没有任何效果。

以下是我正在使用的工具提示数据以及与之相关的小提琴：

 tooltipData="Helo,Angular 2" + "&#013" + "This button is used to test hover message" + "/n" + "This message should come at the last"

Fiddle

【问题讨论】：

标签： javascript html angular tooltip

【解决方案1】：

试试这个 -

&lt;div title="Helo,Angular 2&amp;#013;&amp;#010;This button is used to test hover message&amp;#009;This message should come at the last"&gt;Hover Me&lt;/div&gt;

这里我用过 -

&#010; - for New line

我希望这对你有用。

【讨论】：

【解决方案2】：

您使用了错误的斜线 - 新行应该是 \n 而不是 /n:

tooltipData="Helo,Angular 2" + "&#013" + "This button is used to test hover message" + "\n" + "This message should come at the last"

【讨论】：

谢谢@jack。我更新了小提琴并想使用作为空间，它似乎不起作用。请帮助
那不一样了，但是我的修复对你有用吗？
谢谢杰克。你能评论一下我面临的这个问题github.com/predixdesignsystem/px-tooltip/issues/36 吗？

【解决方案3】：

更新您的fiddle 以使用\n 而不是/n。

【讨论】：

【解决方案4】：

您好，此代码适用于所有浏览器！我使用过用于 chrome 和 safari 中的新行以及用于 IE 的 ul li

function genarateMultiLIneCode(){
var =values["a","b","c"];
const liStart = '<li>';
      const liEnd = '</li>';
      const bullet = '&#8226; ';     
      var mergedString = ' ';
      const unOrderListStart='<ul>'
      const unOrderListEnd='</ul>'
      const fakeNewline = '&#013;&#010;';
      for (let i = 0; i < values.length; i++) {
           mergedString += liStart + bullet + values[i] + liEnd + fakeNewline;
      }
      const tempElement = document.createElement("div");
      tempElement.innerHTML = unOrderListStart + mergedString + unOrderListEnd;    
      return tempElement.innerText;
    }
}

【讨论】：

【解决方案5】：

    var =values["RAHUL","BIKASH","RAMAN"];
const liStart = '<li>';
      const liEnd = '</li>';
      const bullet = '&#8226; ';     
      var mergedString = ' ';
      const unOrderListStart='<ul>'
      const unOrderListEnd='</ul>'
      const fakeNewline = '&#013;&#010;';
      for (let i = 0; i < values.length; i++) {
           mergedString += liStart + bullet + values[i] + liEnd + fakeNewline;
      }
      const tempElement = document.createElement("div");
      tempElement.innerHTML = unOrderListStart + mergedString + unOrderListEnd;

然后使用 tempElement.innerText

【讨论】：