如何使用大號花括號包圍它的引號

我想對文本塊進行樣式設置，使其圍繞每邊的大花括號（以便每個花括號佔據每個邊的整個高度元素）。下面是HTML：如何使用大號花括號包圍它的引號

<blockquote> 
<span class="braceleft">&#123;</span> 
<p class="quotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus   Pellentesque at neque lorem, vitae aliquet risus.</p> 
<span class="braceright">&#125;</span></blockquote>

我還要提到的是，我試圖做到這一點在WordPress，我知道可以添加不必要的標籤。如果我能爲純HTML獲得正確的CSS，我希望能夠弄清楚如何去除不需要的標籤。

如果可以使樣式更容易，我可以輕鬆更改HTML標記。

來源

2013-03-22 terrytek

請記住，您應限制內容以使其適合大括號內。

你或許可以這樣做

<blockquote class="clearfix"> 
    <div class="curly-left float-left"> 
    <div class="float-left"> Content here </div> 
    <div class="curly-right float-left"> 
</blockquote>

然後在您爲捲曲的左側和右側的HIGHT /寬度和背景圖像的CSS。浮動divs並在上使用clearfix。

我認爲應該這樣做。

下面是我用clearfix

/* Clearfix */ 
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } 
.clearfix:after { clear: both; } 
.clearfix { zoom: 1; }

來源

2013-03-22 21:50:41 Steven

<span class="braceleft" style="float:left; padding: 0 10px">&#123;</span> 
<p class="quotation" style="float:left; padding: 0; margin: 0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus Pellentesque at neque lorem, vitae aliquet risus.</p> 
<span class="braceright" style="float:left; padding: 0 10px">&#125;</span>

來源

2013-03-22 21:54:37 Mike

當我稱呼它，你建議的方式，我得到一個正常大小的括號，下一行的報價，和下一行另一個正常大小的大括號。我希望大括號位於報價單的任一側，佔據報價單塊的整個高度。 – terrytek 2013-03-25 21:45:36

做到這一點的方式，無需額外的標籤是使用CSS的:before和:after創建2個括號，然後相應地他們的風格的代碼。

考慮這個代碼（或test the fiddle）：

HTML：

<blockquote class="addCurlys">I like curly <br> curls <br/><br/> I really do<br/><br/>I really really do</blockquote>

CSS：

BLOCKQUOTE.addCurlys {background: yellow; position: relative; padding: 0.5ex; 1em} 
BLOCKQUOTE.addCurlys:before { 
    content: ''; border: 1px dotted pink; 
    position: absolute; right: 100%; top: 0; bottom: 0; width: 30px; 
    background-image: url('http://placekitten.com/g/30/60'); background-size: 100% 100% 
} 
BLOCKQUOTE.addCurlys:after { 
    content: ''; border: 1px dotted pink; 
    position: absolute; left: 100%; top: 0; bottom: 0; width: 30px; 
    background-image: url('http://placekitten.com/g/30/60'); background-size: 100% 100% 
}

下面是它的工作原理（用於開括號）：:before創建僞元素。我們需要添加content屬性，否則它不會被正確渲染。粉紅色的邊框只在那裏，所以你可以看到它在哪裏。

BLOCKQUOTE給出position: relative屬性，以便前後塊可以相對於它定位。我們給:before a position: absolute並給它一個top和bottom的值爲0，以便它與塊引用的頂部和底部邊緣對齊。然後我們給它一個right: 100%，這樣它就會一直推到邊緣的左邊（如果你想在塊引用內部使用，可以使用left:0，根據你的口味進行調整）。和我們喜歡的width。

最後，我們添加一個背景（因爲您希望捲曲垂直拉伸）圖像，並指定我們希望它的大小爲容器100％（:before，即開放大括號）的100％。隨意將小貓圖像更改爲大括號，我更喜歡小貓。

根據您的需求進行調整。

來源

2013-03-22 22:56:20 frozenkoi

有沒有什麼辦法可以做到這一點與印刷術，而不是與圖像？ – terrytek 2013-03-25 21:46:36

可以將'content'設置爲'content：'{''，但我不確定如何對它進行拉伸以使其佔用'BLOCKQUOTE'的整個高度 – frozenkoi 2013-03-25 23:02:33

刪除<範圍>和<p>標籤。編輯開頭<blockquote>標記爲
< blockquote class =「addCurlys」>。使用這個CSS（玩的字體大小爲：前：pseudoelements後）：

blockquote { 
    font-size:1em; 
} 
blockquote.addCurlys:before { 
    content: "{"; 
    font-size:10em; 
} 
blockquote.addCurlys:after { 
    content: "}"; 
    font-size:10em; 
}

因爲EM是計量單位爲：前：pseudoelements後，他們聯繫到字體 - 他們的父母的大小 - blockquote本身。

我想大多數瀏覽器都支持::對於pseudoelements - 我仍然傾向於只使用一個

來源

2014-03-09 03:26:19

因爲添加'{'並且'}'不應該將標記中的''標記刪除？ – ToothlessRebel 2015-04-09 20:00:22

如何使用大號花括號包圍它的引號

回答

相關問題