JSFiddle - React, Tailwind, and code Playground

by Katarn

HTML

<div class="grid">
  <div class="el"><div class="ellip">owo uwu awa uhu lmao lel hola palabaralarga</div></div>
  <div class="el">a</div>
  <div class="el">b</div>
  <div class="el">c</div>
  <div class="el">d</div>
  <div class="el">e</div>
  <div class="el">f</div>
  <div class="el">g</div>
  <div class="el">h</div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.el {
  border: solid 1px red;
  overflow: hidden;
}

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