HTML - Как избежать текста в таблице ячеек, который переполняется, когда ячейка очень короткая?

Question

У меня есть что-то вроде этого на моей HTML-странице:

<table>
  <tbody>
    <tr style="height: 20vh; line-height: 16px;">
      <td width="1%" >Not important text in cell 1</td>
      <td width="42%">Important text in cell 2</td>
      <td width="18%">Not important text in cell 3</td>
      <td width="39%">Very important text in cell 4</td>
    </tr>
  </tbody>
</table>

Но большую часть времени страница окна может отображаться на небольшом экране. Поэтому, когда ячейка слишком короткая (из-за размера экрана или ширины ячейки может варьироваться от 0 до 5%), ширина не влияет, и текст в ячейке отображается полностью, несмотря на добавление max-width: 1%;. На данный момент текст всегда отображается и ячейка адаптирует свою ширину к ширине текста. Как это: Плохой пример

Как мне обрезать текст для каждой ячейки?

УВЕДОМЛЕНИЕ 1: Текст должен быть заключен в одну строку, без переноса.

УВЕДОМЛЕНИЕ 2: Клиентский браузер не может выполнить код JavaScript, и он не подключен к Интернету. Вот почему код генерируется в полном HTML / CSS.

УВЕДОМЛЕНИЕ 3: В некоторых случаях ширина может быть равна 0% или 0px. В этом случае текст не должен появляться.

Итак, вот что я ожидаю со значением ширины 1% для первой ячейки:

• маленький экран: Хороший пример 1 VS Плохой пример
  
• средний экран: хороший пример 2 VS плохой пример
  

Я пытался:

<td width="1%" style="max-width: 1%;">Text in cell 1</td>

А также эти стили CSS:

overflow-wrap: break-word;
white-space: nowrap;
overflow: hidden;

Но я никогда не добивался успеха. Я делаю это неправильно? У кого-нибудь есть идея сделать это?

Answer 1

Наконец, я нашел решение на developer.mozilla.org и наглядный пример на w3schools

Вам нужно будет добавить div в ячейку , а затем добавить эти три свойства в div . Дело в том, что я уже тестировал white-space: nowrap; overflow: hidden; text-overflow: clip; в td, но не в div.

<table>
  <tbody>
    <tr style="height: 20vh; line-height: 16px;">
      <td width="1%">
        <div style="white-space: nowrap; overflow: hidden; text-overflow: clip;">
          Not important text in cell 1
        </div>
      </td>
      <td width="42%">
        <div style="white-space: nowrap; overflow: hidden; text-overflow: clip;">
          Important text in cell 2
        </div>
      </td>
      <td width="18%">...</td>
      <td width="39%">...</td>
    </tr>
  </tbody>
</table>

white-space: nowrap -> Чтобы сохранить текст в одну строку

overflow: hidden -> Не разрешать тексту переполнять div

text-overflow: clip -> Вырезать текст, чтобы избежать переполнения в его контейнере