JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <input type="text" class="child" value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa">
</div>

<hr>
<div class="parent">
  <div class="child">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>

<pre id="out"></pre>

CSS

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

.parent {
  display: flex;
  align-items: center;
  outline: dashed 2px red;
}

JavaScript

showOverflow('input');
showOverflow('div');

function showOverflow(selector) {
  const el = document.querySelector(selector);
  const style = getComputedStyle(el);
  out.textContent += `${selector} overflow: ${style.overflow}\n`;
}