有没有可能让行内元素的每一行都以特定字符开头？

Question

有没有可能让行内元素的每一行都以特定字符开头？

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？

- user4253226

你考虑过使用 border-image 吗？ - user663031

1

Jonathan Sampson的回答比我的好。你应该将他的回答标记为被接受的，而不是我的。 - Daniel F

感谢您的推荐，@DanielF。 - Sampson

1

@JonathanSampson，欢迎您。 - Daniel F

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sampson · Accepted Answer

通过伪元素（无以下解决方案）

可以使用伪元素和多个文本阴影来实现，但这样做比较麻烦。我能想到的最好方法（仅使用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/ enter image description here

没有伪元素

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

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