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

Question

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

Lorem ipsum pain sit amet, consectetur adipisicing elit, "sed do eiusmod tempor incididunt out labore
" 疼痛 magna aliqua。出于某种最小的静脉，这 nostrud 练习
" 我需要劳动和一点点 ex 和舒适的结果。Duis aute
" irure pain in reprehenderit in voluptate velit esse" cillum dolore eu fugiat zero 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-alone）是使用伪元素和多个文本阴影。这样做的一个缺点是它假设开头 " 总是在 blockquote 的第一行：

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

blockquote::before {
    content:"";
    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>

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

Is it possible to start each line of an inline element with a given character?

html

css

quotation-marks

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

没有伪元素