CodePen

HTML

            
              <h1 class="title"><span class="highlight" style="background: black"><del>MathSpace</del> Actually, just use CSS.</span></h1>

<p class="title"><span class="highlight">DEFAULT: This is how highlighted text usally wraps. It gets tight on the left and right edges.</span></p>

<p class="title"><span class="highlight highlight--wrapping">Good News! We can use <del>CSS and Unicode</del> <del>white-space: pre-wrap</del> <ins>box-shadow</ins> to fix it...</span></p>

<p>Hattip: Harry Roberts for being a CSS Wizard <a href="http://jsfiddle.net/csswizardry/KUv8r/">http://jsfiddle.net/csswizardry/KUv8r/</a></p>
<p>Hattip: Fabien-d is also a CSS wizard and shows you can just use box-shadow <a href="http://codepen.io/fabien-d/pen/rHtal">http://codepen.io/fabien-d/pen/rHtal</a></p>

<p class="title title--js"><span class="highlight highlight--wrapping">Then get all "10x" and <del>automate unicode with a tiny jQuery I call "MathSpace"</del> <del>Just use pre-wrap</del> <ins>use box-shadow</ins></span></p>

  <p>FYI: Bit of a problem in <del>drunk</del> Firefox. <strong>BOX-SHADOW trick works in Firefox. Hooray</strong></p>

<p class="title bdb"><span class="highlight">This is a box-decoration-break paragraph</span></p>

<p>Webkit only. Firefox doesn't support this yet: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=613659">https://bugzilla.mozilla.org/show_bug.cgi?id=613659</a></p>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              $pad-wide: 20px;
$color-red: #ee4035;
$color-white: #fff;
$title-pad: 0.25em;
$title-lineheight: $title-pad + 1;

.title {
  font: 36px/1.25 Ubuntu, sans-serif;
  line-height: $title-pad + 1em;
  text-transform: uppercase;
  margin-bottom: 1em;
  
  .highlight {
    display: inline;
    background: $color-red;
    color: $color-white; 
    padding: $title-pad;
  }

  .highlight--wrapping {
    position: relative;
    left: $title-pad;
    padding-left: 0;
    box-shadow: $title-pad 0 0 $color-red,  
                $title-pad*-1 0 0 $color-red;

  }
  

}

html,
body {
  background: #ccc;
  text-align: left;
  padding: 3%;
  font: 100%/1.5 Ubuntu, sans-serif;
}

h1.title {
  font-size: 3em;
}

p {
  margin-bottom: 1em;
}

del { opacity: 0.3; }

a { color: $color-red; }

.bdb {
  .highlight {
    background-color: green;
    box-decoration-break: clone;
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*

// DONT USE JORBASCRUMPS> JUST USE CSSMMMMKAY?

$.fn.mathSpace = function() {
  return $(this).each(function(){
    $(this).children('span').each(function(){
      var text = $(this).text();
      $(this).text(
        text.split(' ').join('\u205f')  /* (U+205F) 'MEDIUM MATHEMATICAL SPACE' \*\/
      ); 
    });
  });
}

$('.title--js').mathSpace();
*/
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................