html - 保留:after element on same line

Question

我正在使用 font-awesome 在一段文本之前和之后添加一些引号图标。根据屏幕的宽度，:after 伪类中的结束引号可能会自行推到下一行。

有没有办法让图标附加到最后一个单词，这样如果它必须转到下一行，它至少需要一个单词？

示例:

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

参见 jsfiddle 的示例:https://jsfiddle.net/3qjro1pj/

Answer 1

句子结尾点和 </p> 之间有空格这是在下一行。这就是它包装的原因。

只需放置您的 </p>在同一条线上。
如果您需要空间，请使用  .

在这里查看您更新的 fiddle :https://jsfiddle.net/Bes7weB/3qjro1pj/4/