Blockquote Hintergrundfarbe folgen Linienlänge

Question

Hallo ist möglich, den Hintergrund meines Blockzitat zu machen, folgen Sie der Länge der Textzeile. Hier ist der folgende Code von meinem Block Zitat

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

Mein aktueller 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; 
} 

Hier ist, wie das zur Zeit aussieht. https://jsfiddle.net/2atm3ktn/

Ist es möglich, diesen Blick mit der Hintergrundfarbe zu erreichen ... https://s7.postimg.org/m29mkdwhn/example.png

ich diesen Effekt, bevor sie durch das Hinzufügen zusätzlicher Behälter auf Positionen erreicht haben (div) und mit Grenzen. Idealerweise würde es keine Tags mehr um den Block geben, da es für den Benutzer einfach ist, einfach auf blockquote im WYSIWYG zu klicken.

Ideen willkommen.

Answer 1

Sie können so etwas tun, hoffe es hilft.

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>