<Br> Not Causing New Line on Chrome

br not causing new line on Chrome

Solved: http://jsbin.com/ezatoy/32/edit

By adding a ZERO WIDTH SPACE to the container element like so:

div:after{ content:'\0200B'; }

This insures that there will be some content after the last <br> occurrence, effectively breaking into a new line. no need to add/change any DOM.

How to have spans not line-break, but the paragraph still line-break, in Chrome?

I'm not sure that this is a bug in chrome or something else causing chrome to behave like this.

However, by default, <span> is an inline element. Just make it inline-block and problem will be fixed.

.word {
  display: inline-block;
  vertical-align: top;
}

html {font-size:20px;}

p {width:10rem;border:1px solid black;}

.word {

  white-space:nowrap;

  display: inline-block;

  vertical-align: top;

}

<p>

  <span class="word">営業</span><span class="word">利益</span><span class="word">予想</span><span class="word">を</span><span class="word">８０億円</span><span class="word">から</span><span class="word">５０億円</span><span class="word">に</span><span class="word">減額</span><span class="word">修正</span><span class="word">する</span><span class="word">。</span>

</p>

Line Breaks not working in Chrome

I've been working on it this morning, and someone mentioned about changing it all to work with tables instead of divs... I did this and cleared all of my code, and now it works!

I'm not sure why the way I was doing it didn't work in Chrome, but it could be that there was just some part of code interfering with it, but tables seems to have done it!

I also found that one of the reason this may have been happening is because of the Required Field Validator, and Regular Expression Validator, they seem to have been pushing the div down further than it needed to be, causing the whole page to break!

So I made sure I made the widths and heights of each table big enough to fit everything.

Thanks for all of your suggestions!! :)

Why doesn’t JavaScript newlines work inside HTML?

\n works. If you have a debugger of sorts (or similar developer tool), you can see the document source, and you will see that there is indeed a newline character. The problem is the way you are looking at the page: you’re not reading its source, you’re reading it as an HTML document. Whitespace in HTML is collapsed into a single space. So when you change the source, it does indeed change, although when interpreted as an HTML document, that change isn’t shown.

Your Node.js error is most probably caused by the fact that you’re running browser scripts on the server. I.e. scripts that refer to the document are intended to be run in a browser, where there is a DOM etc. Although a generic node process doesn’t have such a global object because it isn’t a browser. As such, when you try and run code that references a global object called document on the assumption that it exists just like in the browser, it will throw an error. document.write doesn’t exist; if you want to write to the screen, try console.log or look into the other util functions.

Entering enter causes line break in html. Why?

It's not the actual newline that is the problem, but the fact that you enter any white space between the two div elements.

Because you made them inline-block, this makes them behave like inline elements, which are put next to each other if there is no spacing.

However, when you insert white space between them, the layout algorithm sees that 20% + white space + 80% is more than 100%, thus putting the second div on a new line.

You can verify this behaviour by making the second div 79%, while adding the space (or newline). In that case, the div elements will still be next to each other.

When are br elements ignored when within a paragraph?

In my opinion most browsers follow the WHATWG specification and I would do it also. World Wide Web Consortium (W3C) has On 28 May 2019 announced that WHATWG would be the sole publisher of the HTML and DOM standards. If we have in this specification following rules only, then I would follow those rules.

WHATWG has following recommendations for br element:

The br element represents a line break.

Note: While line breaks are usually represented in visual media by physically moving subsequent text to a new line, a style sheet or
user agent would be equally justified in causing line breaks to be
rendered in a different manner, for instance as green dots, or as
extra spacing.

br elements must be used only for line breaks that are actually part
of the content, as in poems or addresses.

The following example is correct usage of the br element:

<p>P. Sherman<br>
42 Wallaby Way<br>
Sydney</p>

br elements must not be used for separating thematic groups in a
paragraph.

The following examples are non-conforming, as they abuse the br
element:

<p><a ...>34 comments.</a><br>
<a ...>Add a comment.</a></p>
<p><label>Name: <input name="name"></label><br>
<label>Address: <input name="address"></label></p>

Here are alternatives to the above, which are correct:

<p><a ...>34 comments.</a></p>
<p><a ...>Add a comment.</a></p>
<p><label>Name: <input name="name"></label></p>
<p><label>Address: <input name="address"></label></p>

If a paragraph consists of nothing but a single br element, it
represents a placeholder blank line (e.g. as in a template). Such
blank lines must not be used for presentation purposes.

Any content inside br elements must not be considered part of the
surrounding text.

Note: This element has rendering requirements involving the bidirectional algorithm.

Source: WHATWG: The br element

In your examples you have br elements in <br></p> and in <br></a></p> on the end of <p> element. The new line on the end of this element does nothing, but only in this case. In such of this cases you can ignore it. It is also the same in the case of br elements in <br></a></div> and in <br></div> on the end of <div> element.

Cite from WHATWG recommendations (see above): If a paragraph consists of nothing but a single br element, it represents a placeholder blank line. Also it is not empty (like user kalkronline wrote). And in case of W3C and WHATWG opinions conflict user agents have to follow WHATWG recomandations (see above).

Do not forget about style possibility (for ex. clear) for br element.

---

Update from 25/06/2020

I want to post and explain the cite from WHATWG recommendations again(see above):

If a paragraph consists of nothing but a single br element, it represents a placeholder blank line.

This is showed like:

p{border:1px dashed red}

<b>1. example:</b>
<code><p><br></p></code>
<p><br></p>
<b>2. example:</b>
<code><p>I am a line<br><br></p></code>
<p>I am a line<br><br></p>
<b>3. example:</b>
<code><p></p></code>
<p></p>

---

Related Topics