我目前正在为我们的网站添加冗长的工具提示,我想(不必求助于一个神奇的jQuery插件,我知道有很多!)使用回车来格式化工具提示。
为了添加提示,我使用了title属性。我环顾了一下常用的网站,并使用了基本的模板:
<a title='Tool?Tip?On?New?Line'>link with tip</a>
我试过更换?:
< br / > &013;/ & # 13; \ r \ n 环境。换行符(我使用c#)
以上方法都行不通。这可能吗?
我目前正在为我们的网站添加冗长的工具提示,我想(不必求助于一个神奇的jQuery插件,我知道有很多!)使用回车来格式化工具提示。
为了添加提示,我使用了title属性。我环顾了一下常用的网站,并使用了基本的模板:
<a title='Tool?Tip?On?New?Line'>link with tip</a>
我试过更换?:
< br / > &013;/ & # 13; \ r \ n 环境。换行符(我使用c#)
以上方法都行不通。这可能吗?
当前回答
剃须刀的语法
在ASP的情况下。NET MVC,你可以把标题存储为变量,作为\r\n,就可以了。
@{
var logTooltip = "Sunday\r\nMonday\r\netc.";
}
<h3 title="@logTooltip">Logs</h3>
其他回答
在Chrome 79, 已经不管用了。
我成功地做到了:
& # 13; & # 10;
这适用于所有主流浏览器。
如果你试图在一个React项目中这样做,你将以下面的格式呈现:
title={`First line of text ${varOne} Second line of text ${varTwo} Third line of text ${varThree}`}
那么 , 类似的解决方案并不奏效。它们实际上会呈现为文本。
相反,根据需要实际创建文本是更好的选择。为了更好地理解,举个例子:
title={`First line of text ${varOne}
Second line of text ${varTwo}
Third line of text ${varThree}`}
确保在“第二行文本”和“第三行文本”之前删除制表符/空格缩进。否则他们也会渲染。
它在谷歌Chrome 96和Firefox 95.0b12(开发者版,因为,为什么不呢)上进行了测试。它应该也适用于大多数现代浏览器。
这是一个黑客,但它的工作-(在谷歌Chrome和移动测试)
只需要添加不间断空格,直到它中断-你可能需要根据内容的数量限制工具提示的大小,但对于小文本消息,这是有效的:
etc
我尝试了上面的所有方法,这是唯一对我有效的方法。
最新的规范允许换行字符,因此在属性或实体
中使用简单的换行符;(注意字符#和;是必需的)都可以。
只需使用JavaScript。然后它与大多数和较老的浏览器兼容。
换行使用转义序列\n。
document.getElementById("ElementID").title = 'First Line text \n Second line text'