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

Question

我试图模仿旧书中使用的引用方式。报价将是内联的，但报价的每一行在开头都有一个开放的报价，如下所示：

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

如果报价是一个块元素，我设法使这项工作如下：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我的问题是，如果报价是内联的，是否可以产生这种效果？此外，是否可以使用ONLY内联CSS，因为我正在进行的网站只允许修改内联CSS？

Answer 1

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

你可以，但有点混乱。我能想到的最好的方法（仅限CSS）是使用伪元素和多个文本阴影。其中一个缺点是假设开口"始终位于blockquote的第一行：

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>