JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <input value placeholder="it's a really long placeholder" class="search-bar" />
</div>

SCSS

.search-bar {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  
  &:focus, &:active, &::placeholder {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  &:focus::placeholder, &:active::placeholder {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}