This question already has an answer here:
这个问题在这里已有答案:
- How can I use a carriage return in a HTML tooltip? 24 answers
如何在HTML工具提示中使用回车符? 24个答案
I am using this
我正在使用这个
<a href="#" title="select from 1: this 2: that" > Click here </a>
When someone hover over it I see all the text in one line.
当有人将鼠标悬停在它上面时,我会在一行中看到所有文字。
Is there any way to show it on new line?
有没有办法在新线上显示它?
4 个解决方案
#1
17
Try with this code it works
试试这个代码吧
<a href="#" title="select from 1: this 
 2: that" > Click here </a>
#2
8
As you tagged this with accessibility, I would say the most robust approach is not to rely on the title for information.
当你用可访问性标记这个时,我会说最强大的方法不是依赖于标题来获取信息。
The current HTML spec discourages this use as people using who cannot use a mouse (e.g. due to mobility impairment) but use a keyboard and see the screen will never see your tooltip/title text. People using touch screens cannot access it.
当前的HTML规范不鼓励使用不能使用鼠标的人(例如由于移动性受损)但使用键盘并且看到屏幕永远不会看到您的工具提示/标题文本。使用触摸屏的人无法访问它。
Most people using a screen reader will not be aware of the title text either, although it is possible to access in most screen readers it is not read out by default, and someone would have to know to look for it. (And there are more issues.)
大多数使用屏幕阅读器的人也不会知道标题文本,虽然可以在大多数屏幕阅读器中访问它,但默认情况下不会读出,有人必须知道要查找它。 (还有更多问题。)
The spec suggests using this for line breaks:
规范建议使用它来换行:
If the title attribute's value contains "LF" (U+000A) characters, the content is split into multiple lines. Each "LF" (U+000A) character represents a line break.
如果title属性的值包含“LF”(U + 000A)字符,则内容将分为多行。每个“LF”(U + 000A)字符代表换行符。
However, the display of the new lines is dependant on the browser (How can I use a carriage return in a HTML tooltip).
但是,新行的显示取决于浏览器(如何在HTML工具提示中使用回车)。
I suspect that the overall UI approach needs a little more thought, as many people would be confused by the sort of instruction in your example, i.e. what does clicking on it achieve if there are multiple options?
我怀疑整个UI方法需要多一点思考,因为许多人会对你的例子中的那种指令感到困惑,即如果有多个选项,点击它会实现什么?
If your situation makes it difficult to write good link text then I would post up more about the interaction at the UX stackexchange.
如果您的情况使编写好的链接文本变得困难,那么我会在UX stackexchange上发布更多有关交互的内容。
#3
5
if you are generating it dynamically put \n
如果你动态生成它\ n
$(td).attr("title", "One \n Two \n Three");
#4
4
<a href="#" title="select from
1: this
2: that" > Click here </a>
#1
17
Try with this code it works
试试这个代码吧
<a href="#" title="select from 1: this 
 2: that" > Click here </a>
#2
8
As you tagged this with accessibility, I would say the most robust approach is not to rely on the title for information.
当你用可访问性标记这个时,我会说最强大的方法不是依赖于标题来获取信息。
The current HTML spec discourages this use as people using who cannot use a mouse (e.g. due to mobility impairment) but use a keyboard and see the screen will never see your tooltip/title text. People using touch screens cannot access it.
当前的HTML规范不鼓励使用不能使用鼠标的人(例如由于移动性受损)但使用键盘并且看到屏幕永远不会看到您的工具提示/标题文本。使用触摸屏的人无法访问它。
Most people using a screen reader will not be aware of the title text either, although it is possible to access in most screen readers it is not read out by default, and someone would have to know to look for it. (And there are more issues.)
大多数使用屏幕阅读器的人也不会知道标题文本,虽然可以在大多数屏幕阅读器中访问它,但默认情况下不会读出,有人必须知道要查找它。 (还有更多问题。)
The spec suggests using this for line breaks:
规范建议使用它来换行:
If the title attribute's value contains "LF" (U+000A) characters, the content is split into multiple lines. Each "LF" (U+000A) character represents a line break.
如果title属性的值包含“LF”(U + 000A)字符,则内容将分为多行。每个“LF”(U + 000A)字符代表换行符。
However, the display of the new lines is dependant on the browser (How can I use a carriage return in a HTML tooltip).
但是,新行的显示取决于浏览器(如何在HTML工具提示中使用回车)。
I suspect that the overall UI approach needs a little more thought, as many people would be confused by the sort of instruction in your example, i.e. what does clicking on it achieve if there are multiple options?
我怀疑整个UI方法需要多一点思考,因为许多人会对你的例子中的那种指令感到困惑,即如果有多个选项,点击它会实现什么?
If your situation makes it difficult to write good link text then I would post up more about the interaction at the UX stackexchange.
如果您的情况使编写好的链接文本变得困难,那么我会在UX stackexchange上发布更多有关交互的内容。
#3
5
if you are generating it dynamically put \n
如果你动态生成它\ n
$(td).attr("title", "One \n Two \n Three");
#4
4
<a href="#" title="select from
1: this
2: that" > Click here </a>