JSFiddle - React, Tailwind, and code Playground

by rolfsf

HTML

<div class="container">
    <div class="w-45 liner">
        <a href="#">this is a long text string that needs truncation</a>
    </div>
</div>

<div class="container">
    <a href="#" class="w-45 liner">this is a long text string that needs truncation</a>
</div>

CSS

.container { width: 250px; border: 1px solid #CCC;}
.liner {    
    display:block;
    width: 100%;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.w-45 {width: 45%;}
/*a {white-space: nowrap;}*/