JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test1">abcdefghijklmoqrstuvwxyz</div>
<div id="test2"><div>-</div><div>abcdefghijklmoqrstuvwxyz</div></div>

CSS

#test1, #test2 {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 50px;
}
#test1::before {
  content: "-";
  display: block;
}