Behalten: nach Element in der gleichen Zeile

Question

Ich benutze font-awesome, um einige Zitat-Symbole vor und nach einem Absatz des Textes hinzuzufügen. Abhängig von der Breite des Bildschirms kann das End-Anführungszeichen in der: After-Pseudo-Klasse von alleine auf die nächste Zeile geschoben werden.

Gibt es eine Möglichkeit, das Symbol an das letzte Wort angehängt zu halten, damit es, wenn es zur nächsten Zeile übergehen muss, mindestens ein Wort braucht?

Beispiel:

<p class="testimonial"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut velit luctus, convallis ante eget, sodales leo. Curabitur viverra a elit id rutrum. Nunc egestas massa ac convallis eleifend. Nulla semper mi non aliquet ultrices. 
</p> 

.testimonial { 
    font-style: italic; 
    font-weight: 400; 
} 

.testimonial:before { 
    font-family: 'FontAwesome'; 
    content: '\f10d'; 
    font-size: 30px; 
    vertical-align: middle; 
    margin-right: 0.4em; 
    color: #9bc2e2; 
} 

.testimonial:after { 
    font-family: 'FontAwesome'; 
    content: '\f10e'; 
    font-size: 30px; 
    vertical-align: middle; 
    margin-left: 0.4em; 
    color: #9bc2e2; 
} 

See jsfiddle für ein Beispiel: https://jsfiddle.net/3qjro1pj/

Answer 1

Es gibt keine weißen Bereiche zwischen Ihrem Satz Punkt endet und die </p> wich ist in der nächsten Zeile. Deshalb wickelt es sich ab.

Platzieren Sie einfach Ihre </p> in derselben Zeile.
Wenn Sie ein Leerzeichen benötigen, verwenden Sie  .

Ihre aktualisierte Geige hier ansehen: https://jsfiddle.net/Bes7weB/3qjro1pj/4/