JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td>
      <div class="spacefill">
        <div class="spacefill-dots"></div>
        <span class="spacefill-text">Short title</span>
      </div>
    </td>
    <td>1</td>
  </tr>

  <tr>
    <td>
      <div class="spacefill">
        <div class="spacefill-dots"></div>
        <span class="spacefill-text">Verly long title, that <br/>has a fixed linebreak</span>
      </div>
    </td>
    <td>5</td>
  </tr>


  <tr>
    <td>
      <div class="spacefill">
        <div class="spacefill-dots"></div>
        <span class="spacefill-text">Verly long long long long long long long long long long long title</span>
      </div>
    </td>
    <td>20</td>
  </tr>

</table>

CSS

table {
  width: 300px;
}

.spacefill,
.spacefill-dots {
  line-height: 18px;
  font-size: 16px;
}

.spacefill {
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
}

.spacefill-dots {
  z-index: -1;
  /* Push dots behind text */
  height: 18px;
  /* Same as line-height */
  border: 0;
  margin: 0;
  padding: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  overflow: hidden;
}

.spacefill-text {
  background: white;
  /* Very important. Choose backgroundcolor*/
  padding-right: 4px;
  /* Optional space before first point*/
}

.spacefill .spacefill-dots::after {
  content: "........................................................................................................................................................................................................................................................................................................................................................................................................................................"
}