Question

我正在尝试用:before左引号和:after右引号进行报价。在某些情况下，引号将它们自己换行。我想这样做，以便最后一个单词和引号一起打断，正确包裹。关于如何以一种适用于各种内容的方式执行此操作的任何想法？我在Drupal中使用了此元素，并且很多内容不同的文章中都使用了quote元素。

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

树枝：

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

Answer 1

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

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

Answer 2

我怀疑handlebars标记内的空格是在引号元素和文本本身之间插入空格。运行以下代码段，并观察在<p>元素的末尾添加空格如何允许在结束引号之前断字。

.content {
  width: 600px;
}
.quote {
  background-color: #f0f0f0;
  font-size: 25px;
  font-weight: 400;
  padding: 2rem 2.5rem;
  letter-spacing: 0.02px;
  line-height: 35px;
  font-style: italic;
}

.quote:before {
  content: open-quote;
}
.quote:after {
  content: close-quote;
}

<html>
<body>
<div class="content">
This one fits:
<p class="quote">This content should appear between quotes, and they are required to "stick" to the words, not wrap.</p>
This one is just a tiny bit wider:
<p class="quote">This content should appear between quotes, and quotes are required to stick to the words, not wrap.</p>
This one has LWS inside the &lt;p&gt; elements that separates the quotes from the text:
<p class="quote">
This content should appear between quotes, and quotes are required to stick to the words, not wrap.
</p>
</div>
</body>
</html>

防止：在引号后将其换行

2 个答案: