如何用CSS实现段落每行开头添加引号的效果？

嘿，这个需求很有复古感啊！要实现旧书里那种引用段落每行开头都加引号的效果，还得满足你提的三个要求，用CSS完全能搞定，我给你分享两个靠谱的方案：

方案一：利用背景垂直重复（灵活可控） #

这个方法用CSS伪元素+背景图片的方式实现，引号是背景元素，完全不会干扰文本内容，适配性也很强：

首先是HTML结构，就用普通的段落标签就行，不用拆分：

<p class="quoted-paragraph">
  这里是你的引用段落内容，不管多长、换行多少次，每行开头都会自动加上引号。比如像旧书里那样，哪怕窗口大小改变，行数变多变少，引号都会跟着每行出现，而且绝对不会插到单词中间破坏文本 flow。
</p>

然后是CSS样式：

.quoted-paragraph {
  /* 给左侧留出足够空间放置引号 */
  padding-left: 1.5em;
  position: relative;
  line-height: 1.6; /* 调整行高让引号和文字对齐更自然 */
}

.quoted-paragraph::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1em;
  /* 用SVG生成引号，你可以自定义字体、大小、颜色 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="24"><text x="0" y="16" font-family="serif" font-size="16" fill="#333">‘</text></svg>');
  background-repeat: repeat-y;
  /* 让引号垂直居中对齐每行文字 */
  background-position: center left;
}

方案二：利用垂直排版（更简单） #

如果觉得SVG麻烦，也可以直接用文本引号配合垂直排版来实现，代码更简洁：

.quoted-paragraph {
  padding-left: 1.5em;
  position: relative;
  line-height: 1.6;
}

.quoted-paragraph::before {
  content: "‘‘‘‘‘‘‘‘‘‘"; /* 多写几个引号，确保覆盖所有可能的行数 */
  position: absolute;
  left: 0;
  top: 0;
  writing-mode: vertical-lr; /* 垂直排列引号 */
  letter-spacing: 0.5em; /* 调整间距，和行高匹配，让每个引号对应一行 */
  color: #333;
}

为什么这两个方案满足你的要求？ #

• 不干扰文本换行：引号是伪元素的背景/垂直文本，不属于段落的实际内容，所以绝对不会出现引号插到单词中间的情况，文本 flow 完全不受影响；
• 保持段落完整性：整个内容还是一个<p>标签，没有拆分成多个元素，完全符合“一个段落就是一个段落”的要求；
• 响应式适配：不管窗口怎么缩放、行数怎么变化，背景会自动重复，或者垂直排列的引号会自动对应每行，完美适配各种情况。

你可以根据自己的需求调整引号的样式（比如换成双引号“，调整字体、颜色、间距），效果都很稳定哦！

备注：内容来源于stack exchange，提问作者Vun-Hugh Vaw