有文字被大引号包围

我想要段落被大引号包围。我试过许多东西，但我一直与我行高搞乱因为可以在此图像中可以看出：有文字被大引号包围

enter image description here

什么是血统的方式做到这一点？

（？而作为一个额外的，是有一个很酷的收盘版本本帖>> 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; 
}

来源

2014-10-07 clankill3r

你可以添加图片应该看起来如何？ – Matthias 2014-10-07 11:17:58

该死的，这是很难搜索谷歌一个很好的解决方案。使用'：before'和'：after'是优雅的方式。这是一个啧啧http://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/ – Caelea 2014-10-07 11:18:04

http://willmoyer.tumblr.com/post/1580362250/css-pseudo-element-blockquotes – 2014-10-07 11:19:16

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>

来源

2014-10-07 11:32:39

试试这个 -

p:before { 
content: '"'; 
} 

p:after { 
content: '"'; 
}

来源

2014-10-07 11:20:39 Subha

在符合标准的浏览器可以将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/

来源

2014-10-07 11:40:54 ummahusla

您应该使用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/

来源

2014-10-07 11:43:12 Muhammed

，只要你喜欢，我会用图片与这样的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>

结果： enter image description here

来源

2014-10-07 11:44:30

有文字被大引号包围

回答

相关问题