大報價符號，並用CSS

我試圖創建下面的效果BLOCKQUOTE結束：大報價符號，並用CSS

enter image description here

我能放第一位的內容和符號「\ 201C '，但第二個'\ 201D'總是在最後一行和前一行之間創建一個大空間。圖像中的字體是黑體，這就是爲什麼它是從的jsfiddle例子有一點不同：

我的HTML是：

<div id="aaa-BoxBioBlogger" class="boxBioBlogger"> 
    <div class="theQuoteBioBlogger"> 
     <blockquote class="quoteBioBlogger"> 
      This is a testing message to show the functionality 
     </blockquote> 
     <span class="fromquoteBioBlogger">- The Guy -</span> 
    </div> 
</div>

而且我的CSS，沒有任何企圖報價是：

#aaa-BoxBioBlogger{ 
    width: 325px; 
    height: 282px; 
    background-image: url('http://i.imgur.com/mFYYD8J.jpg'); 
    background-size: cover; 
} 

.theQuoteBioBlogger { 
    position: relative; 
    top: 43%; 
    transform: translateY(-50%); 
     -webkit-transform: translateY(-50%); 
    color: #fff; 
    text-align: center; 
} 

.fromquoteBioBlogger { 
    text-transform: uppercase; 
} 
.quoteBioBlogger { 
    width: 76%; 
    line-height: 1.3em; 
    margin: 20px auto; 
    font-size: 1em; 
}

感謝您的幫助

來源

2015-04-18 codiaf

第一個？你什麼意思？第一個報價？ –

你必須先加引號，然後用line-height他們略有下移：

blockquote { 
 
border:none; 
 
font-family: Georgia, "Times New Roman", Times, serif; 
 
margin-bottom:30px; 
 
quotes: "\201C""\201D""\2018""\2019"; 
 
} 
 

 
blockquote { 
 
    font-size:21px; 
 
} 
 

 
blockquote:before { 
 
    content: open-quote; 
 
    font-weight: bold; 
 
    font-size:25px; 
 
    line-height: 110%; 
 
    color:#FFFFFF; 
 
} 
 
blockquote:after { 
 
    content: close-quote; 
 
    font-weight: bold; 
 
    font-size:25px; 
 
    line-height: 110%; 
 
    color:#FFFFFF; 
 
    
 
} 
 

 
#aaa-BoxBioBlogger{ 
 
    width: 325px; 
 
    height: 282px; 
 
    background-image: url('http://i.imgur.com/mFYYD8J.jpg'); 
 
    background-size: cover; 
 
} 
 

 
.theQuoteBioBlogger { 
 
    position: relative; 
 
    top: 43%; 
 
    transform: translateY(-50%); 
 
     -webkit-transform: translateY(-50%); 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 

 
.fromquoteBioBlogger { 
 
    text-transform: uppercase; 
 
} 
 
.quoteBioBlogger { 
 
    width: 76%; 
 
    line-height: 1.3em; 
 
    margin: 20px auto; 
 
    font-size: 1em; 
 
}

<div id="aaa-BoxBioBlogger" class="boxBioBlogger"> 
 
    <div class="theQuoteBioBlogger"> 
 
     <blockquote class="quoteBioBlogger"> 
 
      This is a testing message to show the functionality 
 
     </blockquote> 
 
     <span class="fromquoteBioBlogger">- The Guy -</span> 
 
    </div> 
 
</div>

來源

2015-04-18 01:34:46

酷AJ，但是爲了阻止它增加空白，你應該在''blockquote：after'後面添加'vertical-align：text-top;'，以便在最後一行之後不會有垂直空間。此外，它的'行高'應該是100％。 –

大報價符號，並用CSS

回答

相關問題