块引用背景颜色跟随行长度

Question

您好，可以使块引用的背景与文本行的长度一致。这是我的块引用的以下代码

<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) 和使用边框在标题上实现了这种效果。理想情况下，块引用周围不再有标签，因为用户只需在所见即所得中单击块引用即可。

欢迎提出想法。

Answer 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;}

<blockquote>
<p>
<span>£265,000 will make an XXL difference</span>
</p>
</blockquote>

块引用背景颜色跟随行长度

Blockquote Background Color follow line length

html

css

blogs

border

blockquote