CodePen

HTML

            
              <h1 class="title"><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></h1>

<h1 class="title"><span><span>I did expect to get this result, and it's quite a nice one.</span></span></h1>
            
          
!

↑ Insert the most common viewport meta tag

CSS

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

.title > span {
  background: #FEC;
  /*border-radius: 2em;*/
  box-shadow: -.5em -.5em 0 #FEC,
    .5em -.5em 0 #FEC,
    -.5em .5em 0 #FEC,
    .5em .5em 0 #FEC;
}

/* fixed: no need for text-shadow with an extra element */
.title > span > span {
  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 ..................