I've taken multiline input with textarea html tag eg:
line 1
line 2 with <tags> and # and <b> bold </b>
line 3
but how can I later display this?
If I use:
#Html.DisplayFor(m => m.MultilineText2)
it handles the special characters fine, but not the linebreak
If I use:
#Html.Raw(Model.MultilineText2.Replace(Environment.NewLine, "<br/>"))
it handles the linebreak, but not the special chars.
I just want the result to appear exactly as the user entered it (exactly as you see it in the example above)
If I understand correctly, what you want is to encode everything else except the linebreakers. But you don't need to care about that. Since there's a standard way by white-space :
pre-line
Sequences of white space are collapsed. Lines are broken at newline characters, at , and as necessary to fill line boxes.
So, simply adding a white-space: pre-line will work:
<span style="white-space: pre-line">#Html.DisplayFor(m => m.MultilineText2)</span>
the generated html will be :
<span style="white-space: pre-line">line 1
line 2 with <tags> and @ and <b> bold </b>
line 3</span>
Just use #Html.TextAreaFor(m => m.fieldName)
Related
I have a Many2many field and would like to make a new line after each item.
When trying with other separators like : ',', '/', ... that's work. The problem was only with '\n'. I even tried with '
'
Here is my code:
<span t-esc="'\n'.join(map(lambda x: x.name, move.myfield_ids))"/>
Any help, please ? What's wrong?
Thanks.
Spaces, tabs or line breaks (white spaces) are largely ignored, whitespace in between words is treated as a single character, and whitespace at the start and end of elements and outside elements is ignored.
Whitespace character processing can be summarized as follows:
All spaces and tabs immediately before and after a line break are ignored
All tab characters are handled as space characters
Line breaks are converted to spaces
Any space immediately following another space (even across two separate inline elements) is ignored
Sequences of spaces at the beginning and end of a line are removed
1. Use the CSS white-space property to set how white space inside an element is handled
Example: Using pre-wrap value
<span style="white-space: pre-wrap;" t-esc="'\n'.join(map(lambda x: x.name, move.myfield_ids))"/>
2. You can get the same result using the raw directive, which behaves the same as esc but does not HTML-escape its output. It can be useful to display separately constructed markup (e.g. from functions) or already sanitized user-provided markup.
Example: Using <br/>
<span t-raw="'<br/>'.join(map(lambda x: x.name, move.myfield_ids))"/>
Is there a way to make HTML properly treat \n line breaks? Or do I have to replace them with <br/>?
<div class="text">
abc
def
ghi
</div>
This is to show new line and return carriage in HTML. Then you don't need to do it explicitly. You can do it in CSS by setting the white-space attribute pre-line value.
<span style="white-space: pre-line">#Model.CommentText</span>
You can use CSS white-space property for \n. You can also preserve the tabs as in \t.
For line break \n:
white-space: pre-line;
For line break \n and tabs \t:
white-space: pre-wrap;
document.getElementById('just-line-break').innerHTML = 'Testing 1\nTesting 2\n\tNo tab';
document.getElementById('line-break-and-tab').innerHTML = 'Testing 1\nTesting 2\n\tWith tab';
#just-line-break {
white-space: pre-line;
}
#line-break-and-tab {
white-space: pre-wrap;
}
<div id="just-line-break"></div>
<br/>
<div id="line-break-and-tab"></div>
It can be done various ways.
For example, if you want to insert a new line in a text area, you can use these:
line feed and
carriage return, used like this:
<textarea>Hello
Stackoverflow</textarea>
You can also use <pre>---</pre> preformatted text like this:
<pre>
This is line 1
This is line 2
This is line 3
</pre>
Or you can use a <p>----</p> paragraph tag like this:
<p>This is line 1</p>
<p>This is line 2</p>
<p>This is line 3</p>
You could use the <pre> tag
<div class="text">
<pre>
abc
def
ghi
</pre>
abc
def
ghi
</div>
Using white-space: pre-line allows you to input the text directly in the HTML with line breaks without having to use \n
If you use the innerText property of the element via JavaScript on a non-pre element e.g. a <div>, the \n values will be replaced with <br> in the DOM by default
innerText: replaces \n with <br>
innerHTML, textContent: require the use of styling white-space
It depends on how your applying the text, but there are a number of options
const node = document.createElement('div');
node.innerText = '\n Test \n One '
You can use <pre> tag:
<div class="text">
<pre>
abc
def
ghi
</pre>
</div>
Simple and linear:
<p> my phrase is this..<br>
the other line is this<br>
the end is this other phrase..
</p>
You can use any of the following CSS,
white-space: pre-line;
or
white-space: pre-wrap;
or
white-space: break-spaces;
For more info read: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
You can use this CSS property:
white-space: pre-line
A simple and more natural solution that doesn't involve CSS styles or numeric character references like
would be to use the 
 character entity reference:
The primary colors are:
- Red
- Green
- Blue
Note: Since this is defined simply as the LF (line feed, or the U+000A Unicode code point) character, it can be debatable whether it suits scenarios where the entire CR + LF (carriage return + line feed) sequence is required. But then, it worked in my Chrome, Edge and WebView2 tests done in Windows 10, so it should be safe to use.
Why does:
<pre style="background:red">
line 1
</pre>
render the same as:
<pre style="background:red">line 1</pre>
The first has two more line breaks, but it seems the browser ignores them. What's the rule for this?
If a text node begins with white space (space, new line) it will be ignored by HTML parsers. Encoding the new line into a proper HTML entity forces the parser to acknowledge it.
== carriage return
use this instead:
<pre style="background:red">
line 1</pre>
The pre tag will keep all formatting inbetween, but not at the beginning
See https://stackoverflow.com/a/15529725/6852641 for more
I'm using white-space: pre-wrap style on a HTML <pre> element to allow lines to break when they are longer than the browser window is wide.
Unfortunately those broken lines also look as if they have a line break at the end; the user cannot see if it was an automatic line break.
Is there a way to show either at the end of the line that wrapping is going on (as emacs does with a \ character), or at the beginning of wrapped lines that they are a continuation of a previous line (e.g. with →)?
Copying & pasting should not copy the continuation characters.
Example code:
<pre style="white-space: pre-wrap">for i in range(19): selwidth=5; selheight=1000; image = gimp.image_list()[0];posx=initx+i*90; pdb.gimp_image_select_polygon(image, 2, 8, [posx, 0, posx+selwidth, 0, posx+selwidth-selheight, selheight, posx-selheight, selheight]);</pre >
Preferred rendering, with a → at the beginning of continuation lines:
for i in range(19): selwidth=5; selheight=1000; image = gimp.image_list()[0];posx=
→initx+i*90; pdb.gimp_image_select_polygon(image, 2, 8, [posx, 0, posx+selwidth, 0,
→posx+selwidth-selheight, selheight, posx-selheight, selheight]);
Pre is intended to keep text as it was typed. It helped keep poems and speciality text as they were intended to be seen and not formatted by the browser. I would think most people will be able to tell a line of text is being wrapped in Pre with whitespace: pre-wrap because it would look something like this:
Five little monkeys jumping on the
bed, {{line break}}
One fell off and bumped his head. {{line break}}
Mama called the Doctor and the
Doctor said,{{line break}}
"No more monkeys jumping on the bed!'.{{line break}}
If you went with straight HTML <p> it would look as you had typed it in your example and <pre> with whitespace: pre-wrap would look the space as you have it typed.
To color the ends of each line you might try putting a <span> and give it CSS to color and size or do a <span> on the whole sentence giving it a CSS background color.
AFAIK not with CSS, instead you can replace every newline with 2 newlines so newlines will be distinguished when text wraps, to do this either manually enter two -or more- line-breaks <br>s for each new line, or if you can use javascript then you can replace each semi-colon ; -because the provided example in the question is code where each line ends with ;- replace it with ;\n\n -or with ;<br><br> instead- thus it will recognized.
JS Fiddle
var pre = document.getElementsByTagName('pre')[0],
preHTML = pre.innerHTML;
pre.innerHTML = preHTML.replace(/;\s*/g, ";\n\n");
<pre style="white-space: pre-wrap">for i in range(19): selwidth=5; selheight=1000; image = gimp.image_list()[0];posx=initx+i*90; pdb.gimp_image_select_polygon(image, 2, 8, [posx, 0, posx+selwidth, 0, posx+selwidth-selheight, selheight, posx-selheight, selheight]);</pre >
Webapi returns custom text string with 13 and 10 characters for line. If I show this custom text in html, I do not see line breaks (if I use <pre> tag, then line breaks are shown).
What should be modified in html or css to show linebreaks? I cannot modify webapi.
I am using knockout data binding to insert values from webapi into html.
<p data-bind="text: $data.CustomTxt"></p>
Use css property "white-space: pre-line":
Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks