是否可以使用给定字符开始内联元素的每一行？

Question

我正在尝试模仿旧书中使用的引用风格。引用将是内联的，但引用的每一行都会在开头有一个开放的引用，如下所示：

Lorem ipsum dolor sit amet，consectetur adipisicing elit，“sed do eiusmod tempor incididunt ut labore
" et dolore magna aliqua。Ut enim ad minim veniam, quis nostrud exercitation
" ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
" irure dolor in reprehenderit in voluptate velit esse" cillum dolore eu fugiat nulla pariatur。

如果引用是块元素，我已经成功地完成了这项工作，如下所示：

<blockquote style="position:relative; overflow:hidden; ">
  <div style="position:absolute; ">"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br></div>
  <div style="position:relative; left:1em; width:90%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</blockquote>

我的问题是，如果引用是内联的，是否有可能产生这种效果？此外，是否可以只使用内联 CSS，因为我正在做的网站只允许修改内联 CSS？

Answer 1

带有伪元素（下面没有解决方案）

你可以，有点，但它很乱。我能想到的最好的方法（即单独使用 CSS）是使用伪元素和多个文本阴影。这样做的一个缺点是它假定开头 " 总是在块引用的第一行：

blockquote {
    overflow: hidden;
    line-height: 1em;
    position: relative;
    padding-left: .85em;
    text-indent: -.85em;
}

blockquote::before {
    content:"\22";
    position: absolute;
    top: 1.15em; left: .85em;
    text-shadow:
        0 1em 0 #000, 0 2em 0 #000, 0 3em 0 #000,
        0 4em 0 #000, 0 5em 0 #000, 0 6em 0 #000;
}

你可以在这里玩得更远一点：http://jsfiddle.net/nx296yc8/1/

没有伪元素

如果你愿意放弃伪元素，你可以内联所有这些：

<blockquote style="overflow: hidden; line-height: 1em; position: relative; padding-left: .85em; text-indent: -.85em">
    <span style="position: absolute; top: 1.15em; left: .85em; text-shadow: 0 1em 0 #000, 0 2em 0 #000, 0 3em 0 #000, 0 4em 0 #000, 0 5em 0 #000, 0 6em 0 #000">&quot;</span>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse" cillum dolore eu fugiat nulla pariatur.
</blockquote>