bootstrap badge going out of the box

Question

<div class = "box" >
<div className = "tags pt-2">
{data.tags.map(tag => (
<span key={uuid()} > <Badge className = "tag">{tag}</Badge></span>
))}
</div>
</div>

This is my code when my user write some large content inside the badge. my badge with its content get out of the box instead of badge getting into the new line with its text.

.tag{
word-break: break-word !important;
}
it tried this but it didn't work

Answer 1

Bootstrap Badges and Labels

https://www.w3schools.com/bootstrap/bootstrap_badges_labels.asp

https://getbootstrap.com/docs/5.1/components/badge