您可以使我的块引用的背景遵循文本行的长度。以下是我的块引用的以下代码
<blockquote>
<p>£265,000 will make an XXL difference</p>
</blockquote>
我目前的CSS:
blockquote p {
padding: 10px!important;
text-align: right!important;
font-size: 33px!important;
color: #fff!important;
font-weight: 600!important;
font-family: $heading-fancy!important;
}
blockquote {
background-color: #183052!important;
float: right!important;
width: auto!important;
max-width: 250px!important;
margin: 10px 0!important;
}
以下是目前的情况。 https://jsfiddle.net/2atm3ktn/
是否可以用背景色实现这种外观...... https://s7.postimg.org/m29mkdwhn/example.png
我在标题之前通过添加额外的容器(div)和使用边框来实现此效果。理想情况下,blockquote周围不再有标签,因为用户只需在WYSIWYG中单击blockquote即可。
欢迎提示。
答案 0 :(得分:1)
你可以做这样的事情,希望它有所帮助。
blockquote p {
padding: 10px!important;
text-align: right!important;
font-size: 33px!important;
color: #fff!important;
font-weight: 600!important;
font-family: $heading-fancy!important;
margin: 0;
}
blockquote {
background-color: #183052!important;
float: right!important;
width: auto!important;
max-width: 250px!important;
margin: 10px 0!important;
padding: 0;
}
span{ background-color: green;}
&#13;
<blockquote>
<p>
<span>£265,000 will make an XXL difference</span>
</p>
</blockquote>
&#13;