tymothytym
tymothytym

Reputation: 1611

Insert new line in text only div

I'm working with a CMS that allows only text in a certain div (HTML , like <br>, is parsed to &lt;br&gt;). It is fine with Unicode / HTML codes (e.g. &amp; would generate & and &#x00040; would generate @) but it will seemingly not allow a new line / carriage return. How can I put a <br> in the div, without using HTML?

I've tried:

Here is a fiddle with the same issue (and HTML structure as output by CMS) > https://jsfiddle.net/w3p4wgcc/ ...Is it just not possible?

Upvotes: 13

Views: 81454

Answers (2)

Fabi0
Fabi0

Reputation: 169

You could also use the following in CSS.

div {
    white-space: pre-line;
}

The difference between pre-line, pre-wrap and pre is available under this link

Upvotes: 6

Baklap4
Baklap4

Reputation: 4202

With inline css i've managed to do the following:

<div style="white-space: pre-wrap;">
This is some new text,&#10;this text should be on a new line.
</div>

https://jsfiddle.net/6mqgrym9/

If you need all of your divs to be like this one could say in your stylesheet the following:

div {
    white-space: pre-wrap;
}

if these divs are contained in a root div (which has a id) one could do the following:

#idhere > div {
    white-space: pre-wrap;
}

If you're allowed to use some javascript you can try this:

<div>
    <script>
        document.currentScript.parentNode.innerHTML = 'This is some new text<br>this text should be on a new line.';
    </script>
</div>

Upvotes: 32

Related Questions