I have a group of connected span elements with the class tag from bootstrap v4. Because they are generated from a react.js array of JSX elements, they sit adjacent to each other without any spacing between them:
<span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><!-- ... -->
This is the CSS styling from bootstrap:
.tag {
display: inline-block;
padding: 0.25em 0.4em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
}
These elements may overflow onto multiple lines within a table cell. I attempted to insert a space character manually using JavaScript (source: ), or by enclosing them in a wrapping element to maintain a single root element in the JSX code. However, both solutions were not satisfactory, and I believe there should be a simpler way to achieve this using CSS.
I experiment with the following CSS solution, which would be perfect if it worked; unfortunately, it does not support inline-block elements (https://jsfiddle.net/qjbgzzLr/):
span.tag + span.tag::before {
content: " ";
}
As a temporary fix, I applied a margin-left on span.tag + span.tag, but this method is not ideal as it results in the first element on each line having unnecessary left margin space.
Is there a way to resolve this issue using CSS exclusively?