JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mete">
  <span class="mete-start">When rendering this long sentence&nbsp;</span>
  <span class="mete-end">you will often see a middle ellipsis!!!</span>
</div>

CSS

.mete {
  display: flex;
  align-items: baseline;
  justify-content: center;
  height: 1.5em;
  line-height: 1.5em;
}
.mete-start, .mete-end {
  overflow: hidden;
  height: inherit;
  flex: 0 1 auto;
}
.mete-start {
  word-break: break-all;
}
.mete-end {
  white-space: nowrap;
  direction: rtl;
  text-overflow: ellipsis;
  text-overflow: ' ...';
}
.mete-end::after {
  content: '\200E';
}