The Rogue Break Problem

17 January 2017

There's a problem with TinyMCE that presents in some web browsers. It occasionally adds rouge line breaks at the end of block elements. This is how I find and remove them.

This is what I need to find and reveal:

<p>Some paragraph text.<br/></p>

Unfortunately, <br/> tags aren't selectable / styleable by CSS in the DOM. That means you can't apply formatting rules to them. However, I found that could use a JavaScript JQuery function to insert a block of styleable HTML code before the break:

$(document).ready(function () {
    // Insert carriage return icon after line breaks using a styled span:
    $('br').each(function () {
        $('<span class="break" aria-hidden="true"></span>').insertBefore(this);
    });
});

That function adds a <span> tag before the <br/> tag:

<p>Some paragraph text.<span class="break" aria-hidden="true"></span><br/></p>

I can then use this CSS rule to style it:

span.break {
    padding-right: 14px;
    background-image: url('/Frontend/Images/University/break.png');
    background-repeat: no-repeat;
    background-position: right 50%;
}

There's just one issue remaining, how to deal with legitimate or necessary line breaks? Easy:

address span.break {
    background-image: none;
    padding-right: 0;
}

This is how it looks:

My Way Usability