要添加提示,我使用的是
title
属性。我查看了通常的网站,并使用了以下基本模板:<a title='Tool?Tip?On?New?Line'>link with tip</a>
我尝试将
?
替换为:<br />
&013; /
\r\n
Environment.NewLine
(我在使用C#)以上都不是。有可能吗?
#1 楼
如此简单,您便会踢出自己:只需按Enter! <a href="#" title='Tool
Tip
On
New
Line'>link with tip</a>
评论
@Halcyon,只是为了向其他读者阐明,以上三个代码似乎不是HTML。它们看起来更像是C衍生的语言字符串转义序列。
–山姆
2015年1月7日,下午1:31
@山姆,我不明白你的意思。 \ x0A(字节)是与换行符相对应的字符代码。 \ u000A(unicode)相同。 \ n也是换行符。
–太平
2015年1月7日14:02
@Halcyon,我尝试将这些转义序列插入Firefox和Chrome中的title属性中,而它们只是在工具提示中按字面意思显示。之后,我意识到您可能正在使用该语法作为传达应使用哪些字符(而不是转义序列)的方式。我的评论是通过警告其他人不要尝试将您的转义序列放入他们的HTML中来节省他们的时间,以免他们像我一样浪费时间。
–山姆
2015年1月7日在20:53
不确定是否与上面的注释相关,但是我发现虽然\ n和\ r实际上可以工作,但是如果涉及PHP,则它们只能在“”内而不是''内的字符串中工作。
– Tarquin
2015年5月23日,0:42
@Tarquin它们不能在HTML中使用,它们只能在PHP的双引号中使用,因为这是PHP的双引号的功能。
– Briilliand
15年5月26日在19:11
#2 楼
最新的规范允许换行符,因此可以在属性或实体
内部进行简单的换行(请注意,必须使用字符#
和;
)。评论
Chrome不支持此功能,但对于Firefox来说不错!
–阿拉丁
2015年11月5日,9:35
I tried both and . would not honor intended "line breaks" in chrome version 50.0.2661.94 (64-bit). is working well in current versions of chrome, firefox and opera (all for 64-bit Ubuntu) and internet explorer version 11.0 and some change on windows.
– Tass
May 12 '16 at 21:50
这对我特别有用,因为我试图在Wordpress帖子编辑器上进行此操作。
–ed1nh0
17年5月5日在13:10
works beautifully in IE, Firefox, and Chrome. Thanks!
– Daniel
May 25 '17 at 16:14
For chrome ....... Example: title="title1 title2 title3"
– Malik Zahid
Jun 20 '19 at 5:26
#3 楼
尝试使用字符10。但是,它在Firefox中将无法使用。 :(以文本方式显示(如果有的话),具体取决于浏览器。Small
工具提示可在大多数浏览器上使用。Long
工具提示和IE
和Safari中的换行工作(对于新换行符,请使用
或
)。Firefox和Opera不支持换行符; Firefox不支持长工具提示。 http://modp.com/wiki/htmltitletooltips
更新:
截至2015年1月,Firefox确实支持使用
在HTML title
属性中插入换行符。请参见下面的代码段示例。 <a href="#" title="Line 1 Line 2 Line 3">Hover for multi-line title</a>
评论
+1。如果决定使用jQuery插件,则为获得最佳可访问性,它应从title属性读取其内容,并在运行时用一些任意的不可见字符替换换行符。
–肯特·弗雷德里克(Kent Fredric)
08年12月11日在10:19
+1。有趣的东西。仍然有一些UA在弹出标题时对其进行修饰的问题-我记得FF2,但如今这已不再是一个问题。
–roborourke
08年12月11日上午10:25
As of January 2015 Firefox does support using in a title attribute to insert a line break.
– pseudosavant
Feb 1 '15 at 1:38
我无法在SVG元素
–RemEmber
2015年6月22日14:21
#4 楼
在IE,Chrome,Safari,Firefox(最新版本2012-11-27)中对此进行了测试:
在所有这些工具中均可工作...
评论
第一种方法(在代码中换行)似乎更简单,但不能自动格式化js代码程序。
–horiatu
15年7月24日在15:05
@Camilo Martin, newline and linefeed are the same across platforms. is the unix linefeed just as it's the windows linefeed. Similarly, is the newline for both platforms. The spec specifies the linefeed (LF) char which is of course on both (all?) platforms.
– matty
Aug 29 '15 at 7:45
@matty不确定我是否理解您-正确使用的东西似乎是unix LF(这是一种跨协议和工具的标准换行符),CR仅由旧Mac(和其他晦涩的平台)使用,并且似乎不合适。
–卡米洛·马丁(Camilo Martin)
15年8月30日在9:26
I apologize for my confusing word choice. What I called a linefeed (#10) is really a newline, although often referred to as LF. What I called a newline (#13) is really a carriage return. In any case, my point was that those values are the same across all platforms. The fact that windows (using both of these characters to end a line) and mac (using the "wrong" character to end a line) should be irrelevant in regards to which HTML entity is to be used in a title attribute. The spec says , although apparently works in many circumstances as well.
– matty
Aug 31 '15 at 6:23
plain does not work for chrome on Linux. The sequence does, however.
– Sam Watkins
Jan 1 '16 at 12:32
#5 楼
同样值得一提的是,如果您使用Javascript这样设置title属性:divElement.setAttribute("title", "Line one Line two");
它将不起作用。您必须用Java逸出方式将ASCII十进制10替换为ASCII十六进制A。像这样:
divElement.setAttribute("title", "Line one\x0ALine two");
评论
@MaxNanasy同意,并且它们等效(\ n始终表示字符代码10)
–rvighne
16年8月14日在5:28
#6 楼
从Firefox 12开始,它们现在使用换行HTML实体支持换行符:
<span title="First line Second line">Test</span>
这在IE中有效,根据标题的HTML5规范是正确的属性。
#7 楼
如果您使用的是jQuery:$(td).attr("title", "One \n Two \n Three");
可以使用。
在IE-9中进行了测试:可以使用。
评论
在MVC 3中运行的示例:@ Html.DropDownList(“ RegId”,null,“ Select Region”,new {title =“从下拉菜单中选择一个区域,\ n这是获得有效合同名称的列表所必需的” ,@class =“ form-control”,onchange =“ getContractNames(this)”,style =“ width:200px;”})
–沃伦·拉弗朗斯(Warren LaFrance)
2015年11月4日19:12
#8 楼
作为对
解决方案的贡献,如果您需要执行类似的操作,我们还可以将	
用于制表符。 <button title="My to-do list:
	-Item 2
	-Item 3
	-Item 4
		-Subitem 1">TEST</button>
演示
#9 楼
在Chrome 79上,
不再起作用。我成功完成了以下操作:
在所有主流浏览器中均可使用。
#10 楼
将在所有主流浏览器(包括IE)上运行评论
This answer is outdated; works in Chrome and other browsers as well.
– SaeX
Jun 14 '14 at 16:45
#11 楼

<-----这是插入“进位退货”所需的文本。#12 楼
我知道我参加晚会很晚,但是对于那些只想看一下工作原理的人,这里有一个演示:http://jsfiddle.net/rzea/vsp6840b/3/使用了HTML:
<a href="#" title="First Line
Second Line">Multiline Tooltip</a>
<br>
<br>
<a href="#" title="List:
• List item here
• Another list item here
• Aaaand another list item, lol">Unordered list tooltip</a>
评论
最新的响应,在Firefox上效果很好。谢谢。
– Marwanمروان
2015年1月29日,下午5:10
#13 楼
我不相信。 Firefox 2会修剪长链接标题,实际上它们仅应用于传达少量帮助文本。如果您需要更多说明文字,建议您将其包含在与链接关联的段落中。然后,您可以添加工具提示javascript代码以隐藏这些段落,并将其显示为悬停工具提示。这是让它跨浏览器IMO工作的最佳选择。#14 楼
在Chrome 16以及可能更早的版本上,您可以使用“ \ n”。附带说明,“ \ t”也可以使用#15 楼
我们有一个需要测试所有这些的需求,这是我希望分享的内容 document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")
<p title='Tool
Tip
On
New
Line'>Tooltip with <pre>
new
line</pre> Works in all browsers</p>
<hr/>
<p title="Tool Tip On New Line">Tooltip with <code>&#13;</code> Not works Firefox browsers</p>
<hr/>
<p title='Tool Tip On New Line'>Tooltip with <code>&#10;</code> Works in some browsers</p>
<hr/>
<p title='Tool
Tip
On
New
Line'>Tooltip with <code>&#xD;</code> May work in some browsers</p>
<hr/>
<p id='tooltip'>Tooltip with <code>document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")</code> May work in some browsers</p>
<hr/>
<p title="List:
• List item here
• Another list item here
• Aaaand another list item, lol">Tooltip with <code>• </code>Unordered list tooltip</p>
<hr/>
<p title='Tool\nTip\nOn\nNew\nLine'>Tooltip with <code>\n</code> May not work in modern browsers</p>
<hr/>
<p title='Tool\tTip\tOn\tNew\tLine'>Tooltip with <code>\t</code> May not work in modern browsers</p>
<hr/>
<p title='Tool
Tip
On
New
Line'>Tooltip with <code>&#013;</code> Works in most browsers</p>
<hr/>
提琴
#16 楼
至于谁对
不起作用,则必须将可见行的元素设置为:white-space: pre-line;
参考此答案:https://stackoverflow.com/a/17172412/1460591
评论
这种风格需要应用于什么?标题?像[标题]?
–赞美·安萨里(Zameer Ansari)
16-09-23在10:03
#17 楼
只需使用以下命令即可:<a title='Tool
Tip
On
New
Line'>link with tip</a>
您可以使用此


在标题上添加新行。#18 楼
只需使用JavaScript。然后与大多数和较旧的浏览器兼容。将转义符\ n用于换行符。
document.getElementById("ElementID").title = 'First Line text \n Second line text'
评论
什么版本的Chrome?它适用于我,我正在使用Chrome。
–Welshboy
16年11月16日在14:20
实际上,我使用的是最新版本的Chrome,但是,由于我使用的是SVG Elements,因此无法正常工作,不是可以的。
– NewPHPer
16年11月17日在12:08
#19 楼
如果仅使用简单的title属性,则此
应该可以使用。 在引导程序弹出窗口上,只需在
data-html="true"
属性中使用data-content
并使用html即可。 <div title="Hello 
World">hover here</div>
#20 楼
从有关可访问性的信息以及使用提示或通过使用CR或换行符使其变得更大的工具提示的使用中得到赞赏,各种浏览器无法/不会在基础知识上达成共识这一事实表明,他们不太在意可访问性。评论
有关跨浏览器自定义工具提示的非常简单的解决方案,请参阅kollermedia.at/archive/2008/03/24/easy-css-tooltip/…
–戴夫
2011年8月7日,1:14
@Dave这是一个很好的链接,但是演示中的换行是由于width属性而发生的
–梅尔西
2012年10月19日14:59
#21 楼
根据w3c网站上的这篇文章:CDATA是文档字符集中的字符序列,并且
可能包含字符实体。用户代理应按以下方式解释attribute
值:
将字符实体替换为字符,
忽略换行符,
将每个回车符或制表符替换为一个空格。
这意味着(至少)CR和LF在title属性内不起作用。我建议您使用工具提示插件。这些插件大多数都允许将任意HTML显示为元素的工具提示。
评论
是的,我知道这不是官方的。你错了,但是。这并不意味着它们将不会显示。这意味着W3C规范未说明应如何显示...。这篇文章的重点并不是暗示它们可以用来替换功能更多的插件...。更多的是在降级期间可以使用其他任何插件。
– penderi
2011-09-12 13:48
@ip:我错了,因为更新的w3c建议建议浏览器将内容拆分为LF字符。但是,浏览器最终将实现此行为。
–萨拉曼A
2011年9月14日下午4:23
#22 楼
可以手动创建好看的工具提示,并且可以包含HTML格式。<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>Tooltip</h2>
<p>Move the mouse <a href="#" title="some text
more and then some">over</a> the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text
some <b>more</b><br/>
<i>and</i> more</span>
</div>
<div class="tooltip">Each tooltip is independent
<span class="tooltiptext">Other tooltip text
some more<br/>
and more</span>
</div>
</body>
</html>
这是从w3schools帖子上获得的。在此处尝试上述代码。
#23 楼
剃刀语法对于ASP.NET MVC,您可以使用
\r\n
将标题存储为变量,这样就可以使用。@{
var logTooltip = "Sunday\r\nMonday\r\netc.";
}
<h3 title="@logTooltip">Logs</h3>
#24 楼
hack但可以-(在chrome和移动设备上进行了测试)只要不增加空格就可以了-可能需要限制工具提示的大小,具体取决于内容的数量,但是对于小文本消息却可以:
etc
尝试了以上所有内容,这是对我唯一有效的方法-
#25 楼
我尝试使用“”在新行中显示标题文本,它的工作方式就像是一种魅力
#26 楼
我正在使用Firefox 68.7.0esr,而
无法正常工作。通过<CR>
打破界限确实行得通,所以我将其继续进行,因为它简单而又向前。即
<option title="Constraint PSC/SCS/Activity
Definition Constraint Checker
Database Start Notifier">CnCk
#27 楼
使用data-html="true"
并应用<br>
。评论
这不是规范的一部分。必须是一些随机的工具提示插件
– T J
18/12/12在14:21
评论
It's quite tricky, but there might be a workaround. Change all the spaces in your title into non-breaking space . Then put spaces where you want the line breaks. You may also need to add a bunch of characters before your space (line break).