12

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

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？

4

1 回答 1

5

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

你可以，有点，但它很乱。我能想到的最好的方法（即单独使用 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>
于 2015-06-10T04:57:12.923 回答