JSFiddle - React, Tailwind, and code Playground

HTML

<ul>

<li>
<p class="letters">
Text goes here
</p>
</li>

<li>
<p class="words">
Text goes here
</p>
</li>
    
<li>
<p class="words hidden">
Text goes here
</p>
</li>

<li>
<p class="nowrap">
Text goes here
</p>
</li>

</ul>

CSS

p {
    width: 10px;
    padding: 10px;
    background-color: #ccc;
}

p.letters {
    word-wrap: break-word;
}

p.words {
    word-wrap: normal;
}    

p.hidden {
    overflow: hidden;
}

p.nowrap {
    white-space: nowrap;
}