JSFiddle - React, Tailwind, and code Playground

by ytyaru

HTML

<div class="cardTitles">
<div class="title">
    <div class="titleContent">
        <i class="fa fa-star-o"></i>
        <b>Some long long long title hereaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</b>
        <a href="some href"></a>
    </div>
</div>
</div>

CSS

.cardTitles {
    width: 100%;
    height: 100%;
    border: 1px solid black;
}

.title
{
    position: relative;
    padding-top: 8px;
    padding-bottom: 8px;
}
.titleContent{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}