CodePen

HTML

            
              <h1 class="title"><span><span><span>Multiple line wrapped text for those who want to see long text with some padding but not the usual kind of padding.</span></span></span></h1>

<h2 class="title"><span><span><span>Tested and works on everything IE8+<br />(on desktop)<br/>Now go and use this everywhere.</span></span></span></h2>
            
          
!

CSS

            
              .title {
  background: #EDA;
  border: .25em solid #763;
  font-family: Georgia;
  font-weight: normal;
  margin: 1em auto;
  padding: 1em;
  text-align: center;
  width: 20em;
}

.title > span {
  box-shadow: 0 0 1em #431;
}

.title > span > span {
  outline: .5em solid #FEC;
}

.title > span > span > span {
  background: #FEC;
  box-shadow: -1px 0 0 #FEC,
    1px 0 0 #FEC;
  color: #542;
  position: relative;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................