<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>

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

.title {
  background: #EDA;
  border: .25em solid #763;
  font-family: Georgia;
  font-weight: normal;
  margin: 1em auto;
  line-height: 1.25;
  padding: 1em;
  position: relative;
  text-align: center;
  width: 20em;
  transition: line-height 1s ease-in-out;
}

.title:hover {
  line-height: 3;
}

/* add a nice curved shadow for extra eye candy */
.title:after {
  border-radius: 0 0 100% 100%;
  box-shadow: 0 1em .5em rgba(64, 48, 0, .4);
  content: '';
  bottom: 0.5em;
  left: 1%;
  right: 1%;
  top: 75%;
  position: absolute;
  z-index: -1;
}

/* changed: use outline for wider browser support */
.title > span {
  outline: .5em solid #FEC;
}

.title > span > span {
  background: #FEC;
  /* hide rounding gaps between text box and outline */
  box-shadow: -1px 0 0 #FEC,
    1px 0 0 #FEC;
  color: #542;
  position: relative;
}

/* br breaks the effect by default as it inherits line-height */
.title br {
  line-height: 1
}