JSFiddle - React, Tailwind, and code Playground

HTML

<div class="first">
	<h4>This is the title</h4>
	<p class="first">
		Here starts the problem, because the text continues in horizontal and it should, firstly, fill the entire div and then show the "..." characters.
	</p>
</div>
    
<div class="first">
	<h4>This is the title</h4>
	<p>
		This it how it should look, This it how it should look, This it how it should look, This it how it should look, This it how it should look, This it how it should look, This it how it should look, This it how it should look, This it how it should look, This it how it should look, This it how it should look, This it how it should look, This it how it should look, This it how it should look...
	</p>
</div>

CSS

div.first{
    height: 150px;
    border: 1px solid #ccc;
}
p.first{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}