如何使用大号花括号包围它的引号

我想对文本块进行样式设置，使其围绕每边的大花括号（以便每个花括号占据每个边的整个高度元素）。下面是HTML：如何使用大号花括号包围它的引号

<blockquote> 
<span class="braceleft">&#123;</span> 
<p class="quotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus   Pellentesque at neque lorem, vitae aliquet risus.</p> 
<span class="braceright">&#125;</span></blockquote>

我还要提到的是，我试图做到这一点在WordPress，我知道可以添加不必要的标签。如果我能为纯HTML获得正确的CSS，我希望能够弄清楚如何去除不需要的标签。

如果可以使样式更容易，我可以轻松更改HTML标记。

来源

2013-03-22 terrytek

请记住，您应限制内容以使其适合大括号内。

你或许可以这样做

<blockquote class="clearfix"> 
    <div class="curly-left float-left"> 
    <div class="float-left"> Content here </div> 
    <div class="curly-right float-left"> 
</blockquote>

然后在您为卷曲的左侧和右侧的HIGHT /宽度和背景图像的CSS。浮动divs并在上使用clearfix。

我认为应该这样做。

下面是我用clearfix

/* Clearfix */ 
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } 
.clearfix:after { clear: both; } 
.clearfix { zoom: 1; }

来源

2013-03-22 21:50:41 Steven

<span class="braceleft" style="float:left; padding: 0 10px">&#123;</span> 
<p class="quotation" style="float:left; padding: 0; margin: 0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus Pellentesque at neque lorem, vitae aliquet risus.</p> 
<span class="braceright" style="float:left; padding: 0 10px">&#125;</span>

来源

2013-03-22 21:54:37 Mike

当我称呼它，你建议的方式，我得到一个正常大小的括号，下一行的报价，和下一行另一个正常大小的大括号。我希望大括号位于报价单的任一侧，占据报价单块的整个高度。 – terrytek 2013-03-25 21:45:36

做到这一点的方式，无需额外的标签是使用CSS的:before和:after创建2个括号，然后相应地他们的风格的代码。

考虑这个代码（或test the fiddle）：

HTML：

<blockquote class="addCurlys">I like curly <br> curls <br/><br/> I really do<br/><br/>I really really do</blockquote>

CSS：

BLOCKQUOTE.addCurlys {background: yellow; position: relative; padding: 0.5ex; 1em} 
BLOCKQUOTE.addCurlys:before { 
    content: ''; border: 1px dotted pink; 
    position: absolute; right: 100%; top: 0; bottom: 0; width: 30px; 
    background-image: url('http://placekitten.com/g/30/60'); background-size: 100% 100% 
} 
BLOCKQUOTE.addCurlys:after { 
    content: ''; border: 1px dotted pink; 
    position: absolute; left: 100%; top: 0; bottom: 0; width: 30px; 
    background-image: url('http://placekitten.com/g/30/60'); background-size: 100% 100% 
}

下面是它的工作原理（用于开括号）：:before创建伪元素。我们需要添加content属性，否则它不会被正确渲染。粉红色的边框只在那里，所以你可以看到它在哪里。

BLOCKQUOTE给出position: relative属性，以便前后块可以相对于它定位。我们给:before a position: absolute并给它一个top和bottom的值为0，以便它与块引用的顶部和底部边缘对齐。然后我们给它一个right: 100%，这样它就会一直推到边缘的左边（如果你想在块引用内部使用，可以使用left:0，根据你的口味进行调整）。和我们喜欢的width。

最后，我们添加一个背景（因为您希望卷曲垂直拉伸）图像，并指定我们希望它的大小为容器100％（:before，即开放大括号）的100％。随意将小猫图像更改为大括号，我更喜欢小猫。

根据您的需求进行调整。

来源

2013-03-22 22:56:20 frozenkoi

有没有什么办法可以做到这一点与印刷术，而不是与图像？ – terrytek 2013-03-25 21:46:36

可以将'content'设置为'content：'{''，但我不确定如何对它进行拉伸以使其占用'BLOCKQUOTE'的整个高度 – frozenkoi 2013-03-25 23:02:33

删除<范围>和<p>标签。编辑开头<blockquote>标记为
< blockquote class =“addCurlys”>。使用这个CSS（玩的字体大小为：前：pseudoelements后）：

blockquote { 
    font-size:1em; 
} 
blockquote.addCurlys:before { 
    content: "{"; 
    font-size:10em; 
} 
blockquote.addCurlys:after { 
    content: "}"; 
    font-size:10em; 
}

因为EM是计量单位为：前：pseudoelements后，他们联系到字体 - 他们的父母的大小 - blockquote本身。

我想大多数浏览器都支持::对于pseudoelements - 我仍然倾向于只使用一个

来源

2014-03-09 03:26:19

因为添加'{'并且'}'不应该将标记中的''标记删除？ – ToothlessRebel 2015-04-09 20:00:22

如何使用大号花括号包围它的引号

回答

相关问题