JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<select name="" id="">
  <option value="">
  <span class="overlay"></span>
  <span>Item 1</span>
  </option>
  <option value="">Item 2</option>
  <option value="">Item 3</option>
  <option value="">Item 4</option>
  <option value="">Item 5</option>
  <option value="">Item 6</option>
  <option value="">Item 7</option>
  <option value="">Item 8</option>
  <option value="">Item 9</option>
  <option value="">Item 10</option>
</select>
  
  <div class="ellipsis-wrapper">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, repellat! Hic tempore earum, nemo praesentium unde natus veritatis dolor autem, tempora, quam amet obcaecati nesciunt nobis quia. Dolor, laboriosam, maxime.</div>
  <div>Nihil nemo commodi at id explicabo, repellendus debitis autem ipsam ab nulla soluta temporibus accusantium aliquid earum laborum cupiditate nisi magni facilis, quod, veritatis mollitia? Libero recusandae, corporis rerum quo.</div>
  <div>Repellat eos quod est temporibus vero voluptatem, vel quam voluptate? Repellendus saepe, iure tempora officia! Quos dicta exercitationem, ab quaerat culpa, quis voluptatum quas tenetur praesentium repellendus totam eius iusto!</div>
  <div>Nobis reiciendis recusandae, dignissimos, rem nulla nemo accusamus. Ab officiis at veniam voluptatem adipisci excepturi eum ipsam, inventore enim alias, eveniet labore laborum molestiae fuga est, recusandae id sit! Unde!</div>
  
  
  </div>

CSS

.overlay {
  position: absolute;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: orange;
  opacity: .5;
}

.ellipsis-wrapper {
  outline: 1px solid fuchsia;
  width: 100px;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}