JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ellipsis ellipsis-height ellipsis-line-height">
    <div class="ellipsis-more-top ellipsis-height"></div>
    <div class="ellipsis-text-container">
        <div class="ellipsis-placeholder-top ellipsis-height ellipsis-margin-top"></div>
        <div class="ellipsis-placeholder">
           <span>...</span><span>more</span>
        </div>
        <span class="ellipsis-text">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </span>
    </div>
    <div class="ellipsis-more-container ellipsis-margin-top">
        <div class="ellipsis-more">
            <span>...</span><span>more</span>
        </div>
    </div>
</div>

CSS

.ellipsis {
    overflow: hidden;
    position: relative;
}
.ellipsis-more-top {
    content: "";
    float: left;
    width: 5px;
}
.ellipsis-text-container {
    float: right;
    width: 100%;
    margin-left: -5px;
}
.ellipsis-more-container {
    float: right;
    position: relative;
    left: 100%;
    width: 5px;
    margin-left: -5px;
    border-right: solid 5px transparent;
    white-space: nowrap;
}
.ellipsis-placeholder {
    float: right;
    clear: right;
    color: transparent;
}
.ellipsis-placeholder-top {
    float: right;
    width: 0;
}
.ellipsis-more {
    float: right;
}
.ellipsis-height {
    height: 3.6em;
}
.ellipsis-line-height {
    line-height: 1.2;
}
.ellipsis-margin-top {
    margin-top: -1.2em;
}
.ellipsis-text {
    word-break: break-all;
}