How can I add new line/linebreak character in title attribute in HTML [duplicate]

Answer 1

You can use 
 or 
.

<a href="#" title="select from 1: this &#013; 2: that" >Click here</a>

<a href="#" title="select from 1: this &#010; 2: that" >Click here</a>

Answer 2

<a href="#" title="select from 
1: this 
2: that" >Click here</a>

Answer 3

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.

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.

However, the display of the new lines is dependant on the browser (How can I use a carriage return in a HTML tooltip).

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?

If your situation makes it difficult to write good link text then I would post up more about the interaction at the UX stackexchange.

Answer 4

if you are generating it dynamically put \n

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