JSFiddle - React, Tailwind, and code Playground

by Kiran Duggal

HTML

<div class="wrapper">
  <div class="text-trunc">text red bla bla bla bla bla bla <span class="text-bla"> (blue text)</span> </div>
  <div class="text-trunc">text red bla bla bla bla bla bla <span class="text-bla"> (blue text)</span> </div>
  <div class="text-trunc">text red bla bla bla bla bla bla <span class="text-bla"> (blue text)</span> </div>
  <div class="text-trunc">text red bla bla bla bla bla bla <span class="text-bla"> (blue text)</span> </div>
  <div class="text-trunc">text red bla bla bla bla bla bla <span class="text-bla"> (blue text)</span> </div>
  
 
</div>

CSS

.wrapper {
  background: #FFFFFF;
  width: 350px;
  height;
  auto;
  font-size:22px;
}

.text-trunc {
  width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color:red;
}

.text-bla{
  color:blue;
}