Prevent line break before inline-block element

Question

I would like to show a quotes. Both at the start and the end of the quote, there is a quotation mark, shown as a background image. There should never be a line break between the starting quotation mark and the first word of the quote, or between the last word in the quote and the ending quotation mark. To achieve this I have tried using white-space: nowrap;. The following snippet does what I'm after:

.quote {
  width: 10px;
  white-space: nowrap;
  background: red;
}
.quote-text {
  white-space: normal;
}
.quote-start,
.quote-end {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: blue;
}

<div class="quote">
   <span class="quote-start"></span>
   <span class="quote-text">text that is wrapped over several lines</span>
   <span>&#xfeff;</span>
   <span class="quote-end"></span>
</div>

You can test it in this CodePen.

But is there any way to do this without the ugly <span>&#xfeff;</span>?

Answer 1

You can before and after pseudo elements. Do u want this? Check the codepen and reply. http://codepen.io/SESN/pen/MeeaGp

 .quote {
  width: 10px;
  white-space: nowrap;
  background: red;

}
.quote:before, .quote:after { content: ""; position: relative; background: url(http://1axcbc2mo5e72fuf7p2ouonc.wpengine.netdna-cdn.com/wp-content/uploads/2012/01/left-quotation-marks.png) no-repeat; background-size: contain; padding: 0px 5px 0px 10px;
} 

.quote:after { }
.quote-text {
  white-space: normal;
}
.quote-start,
.quote-end {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: blue;
}