如何在HTML工具提示中使用回车符?

我目前正在向我们的网站添加详细的工具提示,并且我希望(不必诉诸于whizz-bang jQuery插件,我知道有很多!)使用回车符来格式化工具提示。

要添加提示,我正在使用title属性。我浏览了通常的网站并使用了以下基本模板:

<a title='Tool?Tip?On?New?Line'>link with tip</a>

我尝试用替换?

  • <br />
  • &013; / &#13;
  • \r\n
  • Environment.NewLine (我正在使用C#)

以上都不是。可能吗?

小宇宙2020/03/24 09:37:33

使用data-html="true"和应用<br>

卡卡西Near2020/03/24 09:37:33

我尝试使用“”在新行中显示标题文本,它的工作方式就像一个超级按钮

Green逆天2020/03/24 09:37:33

hack但可以使用-(在chrome和移动设备上经过测试)

只是不添加任何空格,直到它断开为止-您可能必须根据内容的数量来限制工具提示的大小,但是对于小文本消息来说,这是可行的:

&nbsp;&nbsp; etc

尝试了上面的所有内容,这是唯一对我有用的东西-

宝儿理查德2020/03/24 09:37:32

剃刀语法

对于ASP.NET MVC,您可以将标题作为使用变量存储,这样就可以使用\r\n

@{ 
    var logTooltip = "Sunday\r\nMonday\r\netc.";
}

<h3 title="@logTooltip">Logs</h3>
Davaid米亚2020/03/24 09:37:32

可以手动创建好看的工具提示,并且可以包含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&#13;&#10;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帖子上获得的。在这里尝试上面的代码

Gil2020/03/24 09:37:32

从有关可访问性的信息以及使用提示或通过使用CR或换行符使其变得更大的工具提示的使用中得到赞赏,各种浏览器无法/不会在基础知识上达成共识这一事实表明,他们不太在意可访问性。

樱L2020/03/24 09:37:32

根据w3c网站上的这篇文章

CDATA是文档字符集中的字符序列,并且可以包括字符实体。用户代理应按以下方式解释属性值:

  • 用字符替换字符实体,
  • 忽略换行,
  • 用单个空格替换每个回车或卡舌。

这意味着(至少)CR和LF在title属性中不起作用。我建议您使用工具提示插件。这些插件大多数都允许将任意HTML显示为元素的工具提示。

古一NearEva2020/03/24 09:37:32

在Chrome 79 &#13;上无法正常运行。

我成功完成了:

&#13;&#10;

这适用于所有主要浏览器。

西里神奇2020/03/24 09:37:32

&#013;如果您仅使用简单的title属性,则此方法应该起作用。

在自举弹出窗口上,只需data-html="true"data-content属性中使用html即可

<div title="Hello &#013;World">hover here</div>

十三2020/03/24 09:37:32

在Chrome 16以及可能的早期版本上,您可以使用“ \ n”。附带说明,“ \ t”也有效

西门2020/03/24 09:37:32

至于谁&#10;不工作,则必须将可见行的元素设置为:white-space: pre-line;

从这个答案引用:https : //stackoverflow.com/a/17172412/1460591

Tony西里Mandy2020/03/24 09:37:32

我不相信。Firefox 2会修剪长链接标题,实际上它们仅应用于传达少量帮助文本。如果您需要更多说明文字,建议您将其包含在与链接关联的段落中。然后,您可以添加工具提示javascript代码以隐藏这些段落,并将其显示为悬停工具提示。这是让它跨浏览器IMO工作的最佳选择。

StafanA前端2020/03/24 09:37:32

作为对&#013;解决方案的贡献,&#009如果您需要执行以下操作,我们还可以将其用于制表符。

<button title="My to-do list:&#013;&#009;-Item 2&#013;&#009;-Item 3&#013;&#009;-Item 4&#013;&#009;&#009;-Subitem 1">TEST</button>

演示版

在此处输入图片说明

2020/03/24 09:37:32

我知道我参加晚会很晚,但是对于那些只想看一下工作原理的人,这里有一个演示:http : //jsfiddle.net/rzea/vsp6840b/3/

使用的HTML:

<a href="#" title="First Line&#013;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>
乐米亚2020/03/24 09:37:32

&#xD; <-----这是插入“进位退货”所需的文本。

Sam番长逆天2020/03/24 09:37:32

如果您使用的是jQuery:

$(td).attr("title", "One \n Two \n Three");

将工作。

在IE-9中测试过:可以正常工作。

凯西里2020/03/24 09:37:32

&#13; 适用于所有专业浏览器(包括IE)

AJinJin乐2020/03/24 09:37:31

最新的规范允许换行符,所以属性或实体内部的一个简单的换行符&#10;(注意,字符#;为必填项)都OK。

神乐2020/03/24 09:37:31

同样值得一提的是,如果要使用Javascript设置title属性,例如:

divElement.setAttribute("title", "Line one&#10;Line two");

它不会工作。您必须使用Java逸出方式将ASCII十进制10替换为ASCII十六进制A。像这样:

divElement.setAttribute("title", "Line one\x0ALine two");

小胖Gil2020/03/24 09:37:31

在IE,Chrome,Safari,Firefox(最新版本2012-11-27)中对此进行了测试:
&#13;

适用于所有人

小小2020/03/24 09:37:31

尝试使用字符10。但是,它在Firefox中将无法使用。:(

文本以浏览器相关的方式显示(如果有的话)。小工具提示可在大多数浏览器上使用。较长的工具提示和换行符可在IE和Safari中使用(&#10;&#13;用于新换行符)。Firefox和Opera不支持换行符。Firefox不支持较长的工具提示。

http://modp.com/wiki/htmltitletooltips

更新:

自2015年1月起,Firefox确实支持使用&#13;来在HTML title属性中插入换行符请参见下面的代码段示例。

<a href="#" title="Line 1&#13;Line 2&#13;Line 3">Hover for multi-line title</a>

蛋蛋2020/03/24 09:37:31

从Firefox 12开始,它们现在使用换行HTML实体支持换行符: &#10;

<span title="First line&#10;Second line">Test</span>

这在IE中有效,并且根据HTML5规范的title属性是正确的