Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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:

  • &NewLine; - https://dev.w3.org/html5/html-author/charref
  • &#10; - New line in text area
  • &#13; - New line in text area
  • &#x0a; or &#xa; or &#x0000a; - https://en.wikipedia.org/wiki/Newline
  • &#x0d; or &#xd; or &#x0000d; - https://en.wikipedia.org/wiki/Newline

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

like image 724
tymothytym Avatar asked Jun 14 '16 11:06

tymothytym


People also ask

How do you put a line break in a div?

You can insert line breaks in HTML with the <br> tag, which is equivalent to a carriage return on a keyboard.

How do you put a line break in text?

To add spacing between lines or paragraphs of text in a cell, use a keyboard shortcut to add a new line. Click the location where you want to break the line. Press ALT+ENTER to insert the line break.

Can I put text directly in a div?

Yes, you can directly add content text into a div tag, although using p tags would be preferable in most circumstances.

How do you add a line to text in HTML?

<br>: The Line Break element. The <br> HTML element produces a line break in text (carriage-return).


1 Answers

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>
like image 141
Baklap4 Avatar answered Sep 24 '22 16:09

Baklap4