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

Question

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

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

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

小提琴

Answer 1

试试这个 -

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

在这里我用了 -


 - for New line

我希望这对你有用。

Answer 2

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

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

Answer 3

更新您的小提琴以使用\n而不是/n 。

Answer 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;
    }
}

Answer 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