JSFiddle - React, Tailwind, and code Playground

by parksd

HTML

<span data-content-start="가나다라마바사"
      data-content-end=  "아자차카타파하"></span>

CSS

.container {
  position:relative;
  width: 100%;
}

.left {
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  overflow: hidden;
  background: red;
  word-wrap: break-word;
}

.right {
  position:absolute;
  top:0;
  left:50%;
  width: 50%;
  overflow: hidden;
  background: yellow;
  text-align: right;
  direction: rtl;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

span::before, span::after {
  display: inline-block;
  max-width: 50%;
  overflow: hidden;
  white-space: pre;
}

span::before {
  content: attr(data-content-start);
  text-overflow: ellipsis;
}

span::after {
  content: attr(data-content-end);
  text-overflow: clip;
  white-space: nowrap;
  word-wrap: break-word;
  direction: rtl;
}