Is there a way to showcase dynamic tags with proper line breaks in CSS? The responsive container needs to break gracefully:
CSS:
.tags {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: white;
padding-left: 0.5em;
padding-right: 0.5em;
padding-top: 0.25em;
padding-bottom: 0.25em;
margin: 0.5em;
}
This is the desired display:
mapTags = tagArray => {
return tagArray.map((item, i) => <span key={i} className={styles.tags}>
{item}</span>);
};
Can you lend me a hand with this issue?
Additionally, what's the solution for dealing with tags that have spaces like "This is a tag"? How can I maintain my borders effectively?