[英]how to prevent tags from word wrapping?
我有很多不需要自動換行的標簽,但我確實希望包裝標簽列表。 例如:
[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; */
}
這是一個小提琴: 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.