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>放在同一条线上即可如果您需要空格，请使用 。

在此处查看您的更新小提琴：https://jsfiddle.net/Bes7weB/3qjro1pj/4/

保持：在同一行上的元素之后

1 个答案: