12

古い本で使われていた引用のスタイルをエミュレートしようとしています. 引用はインラインになりますが、次のように、引用の各行の先頭にオープン クォートがあります。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, "sed do eiusmod tempor incididunt ut labe
" et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud execitation
" 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 のみ) は、疑似要素と複数のテキスト シャドウを使用することです。"これの欠点の 1 つは、開始が常にブロック引用の最初の行にあると想定していることです。

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 に答える