JSFiddle - React, Tailwind, and code Playground

HTML

<div style="color:red;">It works:</div>

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager</span>
  <span>jobs in </span>
  <span id="location">san francisco, california, usa</span>
</div>

<br>

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager</span>
  <span>jobs in </span>
  <span id="location">san francisco, ca</span>
</div>

<div>--------------------------</div>

<div style="color:red;">It doesn't work:</div>
<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager and driver</span>
  <span>jobs in </span>
  <span id="location">san francisco, california, usa</span>
</div>

<br>

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager and driver</span>
  <span>jobs in </span>
  <span id="location">san francisco, ca</span>
</div>

CSS

#container {
  width:208px;
  boder: 1px solid black;
  height: 2em; /* two lines limit */
  line-height: 1em; /* two lines limit */
  overflow: hidden; /* two lines limit */
}

.ellipsis { /* dot dot dot */
  white-space: nowrap; 
  text-overflow: ellipsis;
  overflow: hidden;
}