JSFiddle - React, Tailwind, and code Playground

by Niraj Chauhan

HTML

<p title="I am a long text and I am wrapped to next line">I am a long text and I am wrapped to next line</p>
<p class="truncate" title="I am a long text and I am truncated">I am a long text and I am truncated</p>

CSS

p {
    width:170px;
    margin:10px;
    font-family:Arial;
    font-size:14px;
}
p.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}