Question

我希望段落被大引号括起来。我试了很多东西，但是我一直在弄乱我的线高，如图中所示：

enter image description here

什么是下降方式？

（另外，这个报价有一个很酷的结束版本吗？＆gt;＆gt; 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

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 3

试试这个 -

p:before {
 content: '"';
}

p:after {
 content: '"';
}

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图像。根据你的意愿改变打开和关闭的图像：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

有大引号标记的文字

5 个答案: