根據第一行的寬度包裝行

我有一個主標題和描述的鏈接，我想根據第一行的寬度包裝描述行。我可以通過只使用CSS來實現嗎？根據第一行的寬度包裝行

我有以下代碼：

<a href="http://google.com"> 
    <span class="ht">Oficiální stránky</span> 
    <span class="hb">Podívejte se na oficiální web festivalu</span> 
</a>

https://jsfiddle.net/kybernaut/9uh24zns

希望的輸出：

注意：將有在管線多個鏈路具有不同寬度的第一大膽的標題。

來源

2016-06-20 kybernaut.cz

？ http://stackoverflow.com/questions/3949762/how-to-wrap-text-using-css 編輯：我看到這不完全是你在做什麼。但是，這是將包裹您的子標題的CSS。 –

不，但我不想手動設置寬度。它必須自動完成（我的客戶可以自行更改菜單項目，並且有更多項目不止一個） –

您需要javascript – slashsharp

你可以嘗試CSS table + table-caption解決方案。

.container { 
 
    display: table; 
 
} 
 
.hb { 
 
    display: table-caption; 
 
    caption-side: bottom; 
 
}

<a class="container" href="#"> 
 
    <span class="ht">FIRST LINE</span> 
 
    <span class="hb">second line some example content here</span> 
 
</a>

jsFiddle

來源

2016-06-20 15:19:33 Stickers

這是一個很好的選擇，但有一些有趣的效果 - https://jsfiddle.net/qn0gj95n/ :) –

正確，因爲它的標題，但它可以通過應用邊界到他們兩個 - https://jsfiddle.net/qn0gj95n/2/ – Stickers

謝謝，非常有趣和快速的解決方案。 –

這裏是偷偷摸摸達到這種效果的方法。

.limit { 
 
    border: 1px solid red; 
 
    display: table; 
 
    width: 1%; 
 
    
 
} 
 

 
.ht { 
 
    color: black; 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
    white-space: nowrap; /* stop text wrapping */ 
 
} 
 

 
.hb { 
 
    color: #555; 
 
    font-size: 18px; 
 
    display: block; 
 
}

<a href="http://google.com" class="limit"> 
 
    <span class="ht">Oficiální stránky</span> 
 
    <span class="hb">Podívejte se na oficiální web festivalu</span> 
 
</a>

來源

2016-06-20 15:14:22

-1

您可以使用

換 - 屬性，但主要的瀏覽器無支持文本換行屬性。

.ht { 
 
    color: black; 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
    display: block; 
 
} 
 

 
.hb { 
 
    color: #555; 
 
    font-size: 18px 
 
} 
 
#wrapDiv{ 
 
    width: 190px; 
 
    word-wrap: normal 
 
}

<div id="wrapDiv"> 
 
    <a href="http://google.com"> 
 
    <span class="ht">Oficiální stránky</span> 
 
    <span class="hb" >Podívejte se na oficiální web festivalu</span> 
 
</a> 
 
</div>

您也可以參考，但你有沒有嘗試這個是一樣的How to word wrap text in HTML?

來源

2016-06-20 15:40:17 Ashutosh

根據第一行的寬度包裝行

回答

相關問題