html - 有没有办法在 HTML/CSS 中的每行文本的开头重复引号？

Question

我正在寻找一种在每行引文开头显示引号的方法。有没有办法在 HTML/CSS 中做到这一点？

在较早的 20 世纪之前的排版中，引号通常不仅放在引文的开头和结尾，而且还放在引用文本的每一行的开头(参见下面的示例)。我想在 HTML 网站上模仿这个，但是即使行重新排列，引号也会留在左边，例如较小的屏幕。有办法做到这一点吗？

下面是我想要实现的结果的示例:

(Het leven van den H. Augustinus 中较长引文左侧的多个引号示例)

Answer 1

纯 CSS 解决方案

这让我很吃惊，但你实际上可以只使用 css 添加这个旧的引用效果。

此解决方案使用 :before 将伪元素添加到 block 引用中.此元素填充有引号和 overflow-wrap: anywhere用于垂直堆叠符号。然后我们将它们对齐到文本的左侧以创建效果。

该解决方案似乎可以毫无问题地自动处理容器和字体大小的更改。然而，它可以进一步改进。例如，通过删除引号和字符之间的多余空格。

片段

运行片段以查看。

h4 {
  color: blue;
  margin-bottom: 0;
}


.old-quote {
  display: inline-block;
  position: relative;
  padding-left:0.8rem;
}

.old-quote:before {
  content: '""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0.8rem;
  overflow-y: hidden;
  overflow-wrap: anywhere;
}

.old-quote:after {
  content: '"';
  width: 0.8rem;
}

/* fr - les guillemets */

.old-quote-fr:before {
   content: '««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««««';
}
.old-quote-fr:after {
  content: "»";
}

<h4>Test I - short quote</h4>
<div class="old-quote">
Alles hat ein Ende, nur die Wurst hat zwei
</div>

<h4>Test II - long quote</h4>
<div class="old-quote old-quote-fr"> 
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas c?
</div>

<h4>Test III - large font quote</h4>
<div class="old-quote" style="width:50%;font-size:1.5em;"> 
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo?
</div>