JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contain-title">
    <h1 class="ellipsed">This is the grand title of the grand daddys of them all</h1>
</div>

CSS

.contain-title {
    width: 50%;
}
.ellipsed {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}