My dilemma involves a collection of tags that I prefer not to be subject to word-wrap, but I do want the list of tags to wrap appropriately. For instance:
[first] [second thing] [yet another thing]
What I definitely do not want is:
[first] [second
thing] [yet another thing]
In other words, I am against any breaking within the tag.
What I am aiming for is more like this:
[first] [second thing]
[yet another thing]
I've tried various options such as
word-break: break-word;
/* white-space: nowrap; */
on both the parent and child elements, but with no luck. Either the entire field remains as one line with no breaks at all, or I end up with breaks within the tags.
My current CSS looks like this:
.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; */
}