JSFiddle - React, Tailwind, and code Playground

HTML

<div>Here is a lot of text that should get truncated to the right.</div>

CSS

div {
    background: #eee;                
    white-space: nowrap;                     
    overflow: hidden;
    text-overflow: ellipsis;
    width:100px;
    border:1px solid #999;
    direction:rtl;
    text-align: left;
}
/* -- Uncomment hack to add ellipsis with generated content
div {
    text-overflow: clip;
}
div::after {
    content: "...";
    background-color: inherit;
    position: absolute;
    left: 0;
    padding: 0 .3em;
}
*/