Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<h3>CSS Solution</h3> <p>If you want to disable the effect of multiple <code>&lt;br&gt;</code> on the page, you can do it by CSS without using JavaScript:</p> <pre><code>br + br { display: none; } </code></pre> <ul> <li>Check the <a href="http://jsfiddle.net/ahMMv/" rel="noreferrer">jsFiddle demo</a>.</li> </ul> <p>However, this method is ideal when you are working with tags, something like this:</p> <pre><code>&lt;div&gt;Text&lt;/div&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt; &lt;div&gt;Text&lt;/div&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt; &lt;div&gt;Text&lt;/div&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt; </code></pre> <p>In other cases, like this:</p> <pre><code>Hello World&lt;br /&gt; &lt;br /&gt; Hello World&lt;br /&gt; &lt;br /&gt; Hello World&lt;br /&gt; &lt;br /&gt; </code></pre> <p><strong>It will fail</strong> (as CSS passes text nodes). Instead, use a JavaScript solution.</p> <hr /> <h3>JavaScript Solution</h3> <pre><code>// It's better to wait for document ready instead of window.onload(). window.onload = function () { // Get all `br` tags, defined needed variables var br = document.getElementsByTagName('br'), l = br.length, i = 0, nextelem, elemname, include; // Loop through tags for (i; i &lt; l - 1; i++) { // This flag indentify we should hide the next element or not include = false; // Getting next element nextelem = br[i].nextSibling; // Getting element name elemname = nextelem.nodeName.toLowerCase(); // If element name is `br`, set the flag as true. if (elemname == 'br') { include = true; } // If element name is `#text`, we face text node else if (elemname == '#text') { // If text node is only white space, we must pass it. // This is because of something like this: `&lt;br /&gt; &lt;br /&gt;` if (! nextelem.data.replace(/\s+/g, '').length) { nextelem = br[i+1]; include = true; } } // If the element is flagged as true, hide it if (include) { nextelem.style.display = 'none'; } } }; </code></pre> <ul> <li>Check the <a href="http://jsfiddle.net/ahMMv/31/" rel="noreferrer">jsFiddle demo</a>.</li> </ul>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload