要顯示博客文章的標籤，我有一個跨越一堆的div。我希望任何跨度始終顯示在一行上（如果太長，可以使用省略號）。我如何啓用這與CSS？用CSS，如何確保在跨度邊界上包裝？

<div> 
    <span class='tag'>math</span> 
    <span class='tag'>physics</span> 
    <span class='tag'>mathematical induction</span> 
    <span class='tag'>theoretical physics</span> 
</div

我不想跨度mathematical和induction，或theoretical和physics之間打破。我的標籤跨距的造型，使他們脫穎而出：

.tag { 
    background-color: #aaaaaa; 
    padding: 10px; 
    margin-right: 10px; 
    margin-bottom: 10px; 
    line-height: 400%; 
    color: white; 
}

來源

2016-03-07 Anand

CSS方法

white-space: nowrap

所以你的CSS看起來像

.tag { 
    background-color: #aaaaaa; 
    padding: 10px; 
    margin-right: 10px; 
    margin-bottom: 10px; 
    line-height: 400%; 
    color: white; 
    white-space: nowrap; 
}

使用非易碎空間

在用戶端，你可以只使用&nbsp。

爲了更好的可讀性，我總是更喜歡第一種方法。

來源

2016-03-07 09:00:03 Kordi

我同意--css方法比修改字符串更好 - 我會盡快接受這個答案（說我必須等6分鐘，不知道爲什麼） – Anand

這是沒有關係的，你可以用牢不可破的空間 非常CSS。

例如：

<span class="tag">mathematical&nbsp;induction</span>

來源

2016-03-07 08:59:28 martin

用CSS，如何確保在跨度邊界上包裝？

回答

CSS方法

使用非易碎空間

相關問題