JSFiddle - React, Tailwind, and code Playground

by alxers

HTML

<p class="empty">123456789</p>
<p class="clip">123456789</p>
<p class="ellipsis">123456789</p>
<p class="dot">123456789</p>

CSS

p {
    background: plum;
    white-space: nowrap;
    width: 9%;
    /* "overflow" value must be different from "visible" */
    overflow: hidden;
}

.empty {
    text-overflow: '';
    /* unicode-bidi: bidi-override; */
direction: rtl;
}

.clip {
    text-overflow: clip;
}
.ellipsis {
    text-overflow: ellipsis;
}

.dot {
    text-overflow: '.'
}