要显示博客文章的标签，我有一个跨越一堆的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方法

使用非易碎空间

相关问题