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
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))"/>
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 >
Typically we all using HTML numbers or names in web pages. For example, & is & or &, and $, #, ©, ®, etc.
Is there an HTML number or name for <br>?.
& is a character; & is a HTML character entity for that character.
<br> is an element. Elements don't get character entities.
In contrast to many answers here, \n or
are not equivalent to <br>. The former denotes a line break in text documents. The latter is intended to denote a line break in HTML documents and is doing that by virtue of its default CSS:
br:before { content: "\A"; white-space: pre-line }
A textual line break can be rendered as an HTML line break or can be treated as whitespace, depending on the CSS white-space property.
You may be looking for the special HTML character,
.
You can use this to get a line break, and it can be inserted immediately following the last character in the current line. One place this is especially useful is if you want to include multiple lines in a list within a title or alt label.
<br> is an HTML element. There isn't any ASCII code for it.
But, for line break sometimes
is used as the text code.
Or <br>
You can check the text code here.
No, there isn't.
<br> is an HTML ELEMENT. It can't be replaced by a text node or part of a text node.
You can create a new-line effect using CR/LF inside a <pre> element like below:
<pre>Line 1
Line 2</pre>
But this is not the same as a <br>.
In HTML, the <br/> tag breaks the line. So, there's no sense to use an ASCII character for it.
In CSS we can use \A for line break:
.selector::after{
content: '\A';
}
But if you want to display <br> in the HTML as text then you can use:
<br> // < denotes to < sign and > denotes to > sign
To break to the new line you can use
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
I am using <pre> tags to preserve long strings of text that include user-entered line breaks.
When the input into the original form was exactly:
Paragraph 1
Paragraph 2
Paragraph 3
...the pre returns:
Paragraph 1
Paragraph 2
Paragraph 3
In the database, the string is stored:
"Paragraph 1\r\n\r\nParagraph 2\r\n\r\nParagraph 3."
Why is this happening?
If the best way to get around this to simply strip out all leading spaces from every newline, how can I accomplish this so it happens across the entire site?
Edit: I'm using Ruby on Rails - what would be the code in that case? A particular problem I'm having is with a HAML page.
%pre
- unless condition.blank?
%br
- unless #user.show_notes == false
:preserve
#{#user.notes}
You're probably indenting your code, eg (PHP example)
<pre>
<?php echo $myString ?>
</pre>
Notice the space before the opening <?php tag?
I don't know if using <pre> to preserve user entered line breaks is best.
If you are using PHP, just use nl2br().
Then you don't have to worry about indentation in your HTML...