css - 防止 :after close-quote from wrapping into a new line

Question

我正在尝试使用 :before 左引号和 :after 右引号来引用。在某些情况下，结束引号会自动换行。我想让最后一个词和引号分开，正确包装。关于如何以适用于不同内容的方式执行此操作的任何想法？我在 Drupal 中使用它，这个引用元素用在许多不同内容的文章中。

CSS:

p.quote {
  background-color: #f0f0f0;
  font-family: $didot-font;
  font-size: 25px;
  font-weight: 400;
  padding: 2rem 2.5rem;
  -webkit-text-stroke: 0;
  letter-spacing: 0.02px;
  line-height: 35px;
  color: $gray4-color;
  @extend %left-align;
  text-transform: none;
  font-style: italic;
  @extend %magin-position;

  &:before {
    content: open-quote;
  }
  &:after {
    content: close-quote;
  }
}

Twig :

<div class="col-12">
  <p class="quote" cite="">{{ content.field_quote }}</p>
</div>

Answer 1

尝试将 display:inline-block; 添加到元素中。这会将它们排成一行。

您还可以使用 position: absolute; 然后使用 top 和 left 属性。