JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
 寿限無、寿限無、
五劫の擦り切れ、
海砂利水魚の、
水行末・雲来末・風来末、
喰う寝る処に住む処、
藪ら柑子の藪柑子、
パイポ・パイポ・パイポのシューリンガン、
シューリンガンのグーリンダイ、
グーリンダイのポンポコピーのポンポコナの、
長久命の長助 
</div>

CSS

.box {
  height: 1.5em;
  width: 8em;
  border: solid 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}