user5633550 user5633550 - 6 months ago 24
CSS Question

Keep :after element on same line

I am using font-awesome to add some quote icons before and after a paragraph of text. Depending on the width of the screen, the end quote in the :after pseudo class may get pushed onto the next line all by itself.

Is there any way to keep the icon attached to the last word so that if it must go over to the next line, it at least takes one word with it?

Example:

<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 for an example: https://jsfiddle.net/3qjro1pj/

Answer

There is white spaces between your sentence ending dot and the </p> wich is on the next line. That's why it wraps.

Just place your </p> on the same line.
If you need a space, use &nbsp;.

See your updated fiddle here : https://jsfiddle.net/Bes7weB/3qjro1pj/4/