如何防止标签自动换行？
如何防止标签自动换行？
提问于 2018-07-29 08:47:20
我有一大堆不想换行的标签，但是我do想让标签列表换行。例如：
[first] [second thing] [yet another thing]我不想要的是：
[first] [second
thing] [yet another thing]我在标签中破坏了。
我想要的是这样的：
[first] [second thing]
[yet another thing]我搞砸了
word-break: break-word;
/* white-space: nowrap; */在父级和子级上，但没有任何成功。要么整个字段只以一行结束-根本没有换行，要么我在标签中换行。
目前，我有以下内容：
.tag-box {
word-break: break-word;
}
.tag {
color: white;
background: #000;
border: 1px solid white;
border-radius: 5px;
margin-bottom: 10px;
margin-right: 5px;
padding: 5px;
line-height: 200%;
/* word-break: break-word; */
/* white-space: nowrap; */
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-29 09:14:18
这里有一个小提琴：http://jsfiddle.net/5fev6o2p/6/
CSS代码：
.tag-box {
word-break: break-word;
}
.tag {
color: white;
background: #000;
border: 1px solid white;
border-radius: 5px;
margin-bottom: 10px;
margin-right: 5px;
padding: 5px;
line-height: 200%;
display:inline-block;
}HTML：
<ul class="tag-box">
<li class="tag">[first]</li>
<li class="tag">[second thing]</li>
<li class="tag">[third thing]</li>
<li class="tag">[yet another thing]</li>
<li class="tag">[first]</li>
<li class="tag">[second thing]</li>
<li class="tag">[third thing]</li>
<li class="tag">[yet another thing]</li>
</ul>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51576355
复制相关文章
相似问题
腾讯云开发者
