JSFiddle - React, Tailwind, and code Playground

by peterjc

HTML

<div id="container">
  <div id="parent">
    <div id="child" class="text-truncate">aaa aa  zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</div>
  </div>
</div>

CSS

#container {
  width: 200px;
}

#parent {
  display: flex;
  width: 100%;
  background-color: yellow;
  transform: translate(0px, 20px);
}

#child {
  display: flex;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}