SOURCE

<div class="container">
  <div class="item">
    这是一段文字这是一段文这是一一段文这是一一段文这是一3333一段文这是一一段文这是一
  </div>
   <div class="label-container">
      <span class="label">都市</span><span class="label">连载</span><span class="label">54.82万字</span>
    </div>
</div>

<div class="container">
  <div class="item">
    这是一段文字这是一段文这是这是这是这是这是这是
  </div>
   <div class="label-container">
      <span class="label">都市</span><span class="label">都市</span><span class="label">1万字</span>
    </div>
</div>

<div class="container">
  <div class="item">
    这是一段文字
  </div>
   <div class="label-container">
      <span class="label">都市</span><span class="label">都市</span><span class="label">1万字</span>
    </div>
</div>
<hr />
<div class="container">
  <div class="item1">
    这是一段文字这是一段文这是一一段文这是一一段文这是一3333一段文这是一一段文这是一
  </div>
   <div class="label-container">
      <span class="label">都市</span><span class="label">连载</span><span class="label">54.82万字</span>
    </div>
</div>

<div class="container">
  <div class="item1">
    这是一段文字这是一段文这是这是这是这是这是这是
  </div>
   <div class="label-container">
      <span class="label">都市</span><span class="label">都市</span><span class="label">1万字</span>
    </div>
</div>

<div class="container">
  <div class="item1">
    这是一段文字
  </div>
   <div class="label-container">
      <span class="label">都市</span><span class="label">都市</span><span class="label">1万字</span>
    </div>
</div>

.container {
  border: 1px solid black;
  width: 500px;
  display: flex;
  flex-direction: row;
 
  justify-content: space-between;
  background-color: lightgray;
}
 
.label-container {
  height: 25px;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  justify-content: space-between;
  flex-wrap: nowrap;
}

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

.item1 {
  overflow: hidden; 
  white-space: nowrap; 
  text-overflow: ellipsis;
  direction: rtl;

}

.label { 
  margin-left: 10px;
  border: 1px solid black;
}