Make a 2 line ellipsis text fill max width

Question

I am trying to have a 2 line ellipsis with english and japanese text. The idea would be :

Row can have a max width of X pixels and min width of 0 px. If any text in row don't require max space, then the width of the column is [0, X] If text don't fit 1 line, then jump on second line. If text don't fit 2 line, show ellipsis.

The problem I face is, with Japanese text, or text with character like - etc... the text just break directly, and never fill the max available space.

If I set a max available space, then the text do not jump on second line and is not dynamic (so can't be smaller if size of text don't require X px)

Is there some way to do this without JS ?

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  vertical-align: middle;
  padding: 1rem;
  border-top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.special-td {
  max-width: 250px;
}

.wrapper{
  position: relative;
  height: fit-content;
  width: ft-content;
}

.image {
    width: 48px;
    height: 48px;
    border-radius: 5px;
 }
 
 .text-truncate-2{
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    word-wrap: break-word;
    white-space: break-spaces;
    margin: auto;
}

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    <th>Contact</th>
    <th>Country</th>
    <th>Contact</th>
    <th>Country</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td class="special-td">
      <div style="display:inline-flex">
      <div class="wrapper">
        <img src="https://via.placeholder.com/48x48">
      </div>
      <span class="text-truncate-2" > Leotica/キッズサロペットパンツ/ホワイト/90</span>
      </div>
    </td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td class="special-td">
      <div style="display:inline-flex">
        <div class="wrapper">
          <img src="https://via.placeholder.com/48x48">
        </div>
        <span class="text-truncate-2" >234234-234234-234234-234234-2342234234</span>
      </div>
    </td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>