Blockquote 배경색은 줄 길이를 따라야합니다.

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/

내가 별도의 용기 (DIV)를 추가 및 테두리를 사용하여 제목을하기 전에이 효과를 달성 https://s7.postimg.org/m29mkdwhn/example.png

... 가능 배경색이 모양을 달성하는 것입니다. 이상적으로 블록 쿼트 (blockquote) 주위에 태그가 더 이상 없을 것입니다. 사용자가 단순히 WYSIWYG에서 blockquote를 클릭하기 만하면됩니다.

아이디어를 환영합니다.

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>