CODEWITHSUNDEEP
htmljquery
murday1983
murday1983

Reputation: 4016

Display multi line string in a div

I have a registration process and on the confirm details I'm trying to display the address entered but I don't seem to be able to get it to display correctly and I have tried other answers on the site but none seem to be working.

Code

console.log('compAdd_Passed_From_Func', compAdd)

$('#cdCompAdd').html(compAdd);
$('#cdCompAdd1.5').text(compAdd);
console.log('cdCompAdd', $('#cdCompAdd').val(compAdd))
console.log('cdCompAdd1.5', $('#cdCompAdd').val(compAdd))

$('#cdCompAdd2').html(compAdd);
console.log($('#cdCompAdd2').html(compAdd))

HTML

<textarea id="cdCompAdd" style="pointer-events: none; resize: none;border: none; overflow: hidden"></textarea>
<textarea id="cdCompAdd1.5" style="pointer-events: none; resize: none;border: none; overflow: hidden"></textarea>
<div id="cdCompAdd2" class="col-12"></div>

Ideally, I want to use the DIV but I initially tried and found an answer saying to use textarea

Looking at devtools the address is passed from my initial function to this function which populates all the fields on the page, is correct as shown below:

enter image description here

But this is what my actual page looks like:

enter image description here

This is the function that is populating my 'compAdd'.

$('#compAddressDetailsSection :input.address').each(function () {
    if (this.value != '') {
        compAdd += this.value + '\n';
    }
});

It does this as the user leaves the page and is working as shown above, but I can't get it to display as:

Add line one

Add line two

town

county

BB1 1BB

Upvotes: 1

Views: 1543

Answers (3)

MR. WEERASINGHE U.K.
MR. WEERASINGHE U.K.

Reputation: 131

Add this style to your div

white-space: pre-wrap

Answer from: https://github.com/angular/angular/issues/7781#issuecomment-502162034

Upvotes: 0

Obzi
Obzi

Reputation: 2390

As you asked:

Just change '\n' for '<br>'.
Line break aren't displayed by HTML (until they're inside a <pre> tag).

Upvotes: 2

Ronald Bieber
Ronald Bieber

Reputation: 41

Alternatively, you can output to a <pre>-container instead of a <div>. pre will honor linebreaks, indentions etc.

Upvotes: 0

Related Questions