如何防止标签自动换行?

时间:2018-07-29 00:47:20

标签: css tags word-break nowrap

我有很多我不想自动换行的标签,但是我愿意想要换行标签列表。 例如:

[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 个答案:

答案 0 :(得分:1)

这里是一个小提琴:http://jsfiddle.net/5fev6o2p/6/

CSS代码:

get_object

HTML:

.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;
}