帶跨度標籤的多行文本邊框問題

我有一個標題文字，其周圍有邊框。較大的文本有兩行，但邊界斷開。所以，我應用了CSS風格box-decoration-break: clone;。但是，這會將文本分成兩個不同的區塊，如附加屏幕中。是否可以在文本週圍顯示邊框？帶跨度標籤的多行文本邊框問題

需要實現這樣的;

HTML這樣的;

<span class="border-title">LOREM IPSUM DUMMY CONTENT LOREM IPSUM DUMMY CONTENT</span>

CSS Style applied;

.border-title { 
    color: #264755; 
    text-transform: uppercase;  
    font-size: 24px; 
    border: 1px solid #3CADCA;  
    padding: 10px 20px 5px;  
    -webkit-box-decoration-break: clone; 
    box-decoration-break: clone; 
}

來源

2017-07-01 Arun Chandran

你能告訴我們貼在箱子上的整體風格？ – Pim

Hi @Pim，更新了描述。謝謝您的幫助。 –

添加屬性display: inline-block;

.border-title { 
 
border: 1px solid blue; 
 
display: inline-block; 
 
}

<div style="max-width: 300px;"><span class="border-title">LOREM IPSUM DUMMY CONTENT LOREM IPSUM DUMMY CONTENT</span></div>

來源

2017-07-01 19:41:40 buxbeatz

有沒有這樣的事情，在css – natanelg97

hehe錯字'diplsay';固定。 – buxbeatz

嗨@buxbeatz，謝謝。這是一個解決方案。沒有最大寬度有沒有可能？想知道。 –

如果你不想使用來自@ buxbeatz的帖子在div最大寬度可以添加 display:block;到您的CSS和應該很好走。

.border-title { 
 
    color: #264755; 
 
    text-transform: uppercase;  
 
    font-size: 24px; 
 
    border: 1px solid #3CADCA;  
 
    padding: 10px 20px 5px;  
 
    -webkit-box-decoration-break: clone; 
 
    box-decoration-break: clone; 
 
    display:block; 
 
}

<span class="border-title">LOREM IPSUM DUMMY CONTENT LOREM IPSUM DUMMY CONTENT</span>

來源

2017-07-02 05:09:54 Syfer

嗨@Syfer，謝謝你的提示。我之前嘗試過，但問題是，我有一個小標題，邊框將是全寬。我想根據文本的寬度來調整邊框。我認爲最大寬度是一個很好的解決方案。 –

你也可以嘗試'display：inline-block'？寬度100％？它將適合它放置在你放置它的地方。 – Syfer

它也設置邊框全寬。不尊重寬度。 –

帶跨度標籤的多行文本邊框問題

回答

相關問題