有文字被大引號包圍

Question

我想要段落被大引號包圍。 我試過許多東西，但我一直與我行高搞亂因爲可以在此圖像中可以看出：

什麼是血統的方式做到這一點？

（？而作爲一個額外的，是有一個很酷的收盤版本本帖>> 69）

<p><span>&#8223</span><a href="#">Foobar</a><br />Foobar<br />Foobar<span>&#8223</span></p> 
<p><span>&#8223</span><a href="#">Foobar</a><span>&#8223</span></p> 
<p><span>&#8223</span><a href="#">Foobar</a><span>&#8223</span></p> 

body { 
    font-family: sans-serif; 
} 

a { 
    text-decoration: none; 
    color: rgba(50, 50, 50, 1); 
} 

span { 
    font-size: 100px; 
    position: relative; 
    top: 50px; 
} 

p { 
    line-height: 10px; 
} 

Answer 1

http://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/

是一篇優秀的文章你需要什麼。

This Fiddle使用上述概念做

CSS

blockquote { 
    background: #f9f9f9; 
    margin: 1.5em 10px; 
    padding: 0.5em 10px; 
    quotes:"\201C""\201D""\2018""\2019"; 
    padding: 30px; 
    position:relative; 
} 
blockquote:before { 
    position:absolute; 
    color: #ccc; 
    content: open-quote; 
    font-size: 4em; 
    top:0; 
    left:0; 
} 
blockquote:after { 
    position:absolute; 
    color: #ccc; 
    content: close-quote; 
    font-size: 4em; 
    line-height:0; 
    bottom:0; 
    right:0; 
} 

HTML

<blockquote> 
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac 
turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor 
sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies 
mi vitae est. Mauris placerat eleifend leo 
</blockquote> 

Answer 2

試試這個 -

p:before { 
content: '"'; 
} 

p:after { 
content: '"'; 
} 

Answer 3

在符合標準的瀏覽器可以將blockquote顯示與效果 「之前大行情」，和在IE中用粗厚的左邊界和淺灰色背景。 與其他的blockquote技術不同，此樣式不需要嵌套的塊級元素（如p）。因此，它會將段落變成內聯樣式的元素，以防止內容降到報價以下。

CSS

blockquote { 
    background: #f9f9f9; 
    border-left: 10px solid #ccc; 
    margin: 1.5em 10px; 
    padding: 0.5em 10px; 
    quotes: "\201C""\201D""\2018""\2019"; 
} 
blockquote:before { 
    color: #ccc; 
    content: open-quote; 
    font-size: 4em; 
    line-height: 0.1em; 
    margin-right: 0.25em; 
    vertical-align: -0.4em; 
} 
blockquote p { 
    display: inline; 
} 

的jsfiddle例如 - http://jsfiddle.net/xgku06ho/

Answer 4

您應該使用psudo修復

p { 
    line-height: 10px; 
    background: #f9f9f9; 
    margin: 1.5em 10px; 
    padding: 0.5em 10px; 
    quotes: "\201C""\201D""\2018""\2019"; 
} 
p:before { 
    color: #ccc; 
    content: ''; 
    font-size: 4em; 
    line-height: 0.1em; 
    margin-right: 0.25em; 
    vertical-align: -0.4em; 
} 

演示http://jsfiddle.net/r9b4ptsr/1/

Answer 5

，只要你喜歡，我會用圖片與這樣的CSS，如果你不能擁有你想只css.Change打開和關閉圖像結果：http://jsfiddle.net/csdtesting/funeygf0/

blockquote.style3 { 
 
    font: 18px/30px normal Tahoma, sans-serif; 
 
    padding-top: 22px; 
 
    margin: 5px; 
 
    background-image: url(http://css-tricks.com/examples/Blockquotes/images/openquote3.gif); 
 
    background-position: top left; 
 
    background-repeat: no-repeat; 
 
    text-indent: 65px; 
 
} 
 
blockquote.style3 span { 
 
    display: block; 
 
    background-image: url(http://css-tricks.com/examples/Blockquotes/images/closequote3.gif); 
 
    background-repeat: no-repeat; 
 
    background-position: bottom right; 
 
}

<blockquote class="style3"><span>Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat. Claritatem aliquip quod putamus vulputate iusto. Doming minim typi zzril lius usus. In clari mutationem autem non sit. Qui augue mirum dynamicus gothica ut. Demonstraverunt soluta sequitur autem.</span> 
 
</blockquote>

結果：