newline in td title=
This should now work with Internet Explorer, Firefox v12+ and Chrome 28+
<img src="'../images/foo.gif'"
alt="line 1
line 2" title="line 1
line 2">
Try a JavaScript tooltip library for a better result, something like OverLib.
How can I use a carriage return in a HTML tooltip?
It’s simple: just press Enter!
<a href="#" title='Tool
Tip
On
New
Line'>link with tip</a>
How to show multiline text in a table cell
You want to use the CSS white-space:pre
applied to the appropriate <td>
. To do this to all table cells, for example:
td { white-space:pre }
Alternatively, if you can change your markup, you can use a <pre>
tag around your content. By default web browsers use their user-agent stylesheet to apply the same white-space:pre
rule to this element.
The PRE element tells visual user agents that the enclosed text is "preformatted". When handling preformatted text, visual user agents:
- May leave white space intact.
- May render text with a fixed-pitch font.
- May disable automatic word wrap.
- Must not disable bidirectional processing.
Wrap the table cell content at newline character
If you got the string from a database, there are two ways to accomplish this:
To replace \n
's with html breaks:
echo str_replace("\n", "<br>", $string);
To see \n
's as they are:
echo '<pre>' . $string . '</pre>';
There are also a css solution, apply this rule to the container:
white-space:pre;
Add line break within tooltips
Just use the entity code
for a linebreak in a title attribute.
Related Topics
Google Web Fonts and PDF Generation from HTML with Wkhtmltopdf
Bash Script to Convert from HTML Entities to Characters
Dropdown with a Form Inside with Twitter-Bootstrap
"Compile" CSS into HTML as Inline Styles
Vertically Centering a Div in Body
Why Is 100% Height Not 100% of the Browser Height
Border Corner Shape Scoop Doesn't Work
CSS - Hide Options from Select Menu on iPhone & Safari
Displaying Elements Other Than Fullscreen Element (Html5 Fullscreen API)
Making a Custom Input Text Type
How to Change Bootstrap Select Arrows to Glyphicon
Html/CSS Hack to Allow Overflow-X: Auto & Overflow-Y: Visible