保持 :after 元素在同一行

Question

我正在使用 font-awesome 在一段文字前后添加一些引号图标。根据屏幕的宽度，:after pseudo class 中的结尾引号可能会被单独推到下一行。

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

示例：

<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> 之间有白色的 spaces。这就是它包装的原因。

只需将您的 </p> 放在同一行即可。
如果您需要 space，请使用  。

在此处查看更新后的 fiddle：https://jsfiddle.net/Bes7weB/3qjro1pj/4/

保持 :after 元素在同一行

Keep :after element on same line

html

css

font-awesome