CODEWITHSUNDEEP
javascriptjqueryhtml
David
David

Reputation: 3323

How to preserve a line break

Line breaks and carriage returns... Must be the most complicated part of coding. (for me)

Have this code in a page (which came from database stored as This from Ricardo\nAnd also a test\nRent 3000.00):

<td title="This from Ricard
And also a test
Rent 3000.00" style="width:198px;text-align:left">....</td>

Then use this to get the title attribute with 'hidden' \n's

var v = $('#'+i).parent().attr('title');        // i = id of <span> child of <td>

Along the way, the line breaks get lost and using the variable v into a text input box:

This from RicardAnd also a testRent 3000.00

What does it take to preserve the \n's and have this look instead like below?

Screenshot of desired result (with \n's present) after clicking edit

Upvotes: 9

Views: 14772

Answers (6)

Jeremy J Starcher
Jeremy J Starcher

Reputation: 23873

This question had me curious, so I had to check the source: http://www.w3.org/TR/html401/struct/global.html#adef-title

The W3C is completely silent on how various form of white space within an attribute is treated, so I am force to assume it follows the same rules as HTML.

Under HTML, unless under a <PRE> element or similar CSS rule, all white space is collapsed to a single space for rendering.

Thus:

<p>The    quick  brown
fox
jumped



over the
lazy dog</p>

is rendered the same as:

<p>The quick  brown fox jumped over the lazy dog</p>

This HTML behavior, combined with fact that user agents (browsers) may render the TITLE attribute in any way they wish, makes it likely that most (if not all) such agents would have no reason to preserve end-of-line markers (carriage return and newline or \r\n).

Edit:

If the formatting is important, the title text could be escaped and put inside a data-* element. Using a mouse-over, a custom popup box could show the formatted HTML instead.

Edit 2 - Taken from your original question:

<td data-title="This from Ricard<br><br>And also a test<br>Rent 3000.00"
style="width:198px;text-align:left">
 ....
</td>

You can read more about data-* attributes here: http://www.javascriptkit.com/dhtmltutors/customattributes.shtml

In short, in some mouseover code, you can find the text with:

var mytitle = <element>.getAttribute("data-title");

Then use a popup div to display mytitle

Upvotes: 0

ngonzalvez
ngonzalvez

Reputation: 431

The line breaks are still there, it is just that the browser tries to render them.

If you still want to see the "\n" try this:

var v = $('td:first-of-type').attr('title').replace(/\n/g, "\\n");

Else, if what you want is NOT to see the "\n" and instead see the line breaks, you could do it this way:

var v = $('td:first-of-type').attr('title').replace(/\n/g, "<br/>");

Check this JSBin

Upvotes: 18

Gung Foo
Gung Foo

Reputation: 13568

According to the HTML specification all line breaks should be "escaped" aka replayed by &#xA;

http://www.w3.org/TR/2006/REC-xml11-20060816/#sec-line-ends

http://www.w3.org/TR/2006/REC-xml11-20060816/#AVNormalize

Upvotes: 0

Ashirvad
Ashirvad

Reputation: 2377

you can use javascript global methods escape() to encode your string v and unescape() to decode it back for use.

here is your5 fiddle

http://jsfiddle.net/jYNKG/

in your code this line can be like this 

var v = escape($('#'+i).parent().attr('title'));

Upvotes: 2

Dave Snigier
Dave Snigier

Reputation: 2613

You would need to read this from the database directly. The line endings are being interpreted when the HTML is being generated for the site which is why you see the multi-line td element in the code.

When you go to reference that td element, it spits out the value in a single line. Once this data is lost, you can't recreate it in any manner.

Upvotes: 0

Radoslav Georgiev
Radoslav Georgiev

Reputation: 1376

Well, if you put the string into a text input box, there will be no new lines since the text input box is for single-line only text.

The \n are there - you can try splitting by them:

lines = str.split("\n")

Upvotes: 1

Related Questions