Предотвращение разрыва строки перед элементом встроенного блока

Question

Я хотел бы показать цитаты. Как в начале, так и в конце цитаты есть кавычка, отображаемая как фоновое изображение. Никогда не должно быть разрыва строки между стартовой кавычкой и первым словом цитаты, или между последним словом в цитате и кавычкой окончания. Для этого я попытался использовать white-space: nowrap;. Следующий фрагмент кода делает то, что я после:

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

Вы можете проверить его в этом CodePen.

Но есть ли способ сделать это без уродливого <span>&#xfeff;</span>?

Answer 1

Вы можете до и после псевдо элементов. Вы хотите этого? Проверьте код и ответ. 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; 
}