How to make the width of a paragraph fit tightly to the content when text wrapped over multiple lines?

Question

Paragraph element So i have a paragraph inside a div that breaks on white spaces. My problem is that it's width has some empty space included on the sides. I'm presuming that's because of the word wrapping. I can't set a fixed with because the texts are dynamic. I'm using react if that helps

<div><p class="team"> Wolverhampton Wonderers</p></div>

.team {
    word-break: break-word;
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: center;
    background: black;

}

I have tried setting a fixed width and got an acceptable result for the particular text i was looking at, but I need a dynamic solution. CSS/JS