HTML / CSS: уменьшить ячейку и ее содержимое

Question

У меня есть таблица, в которой одна строка особенно широка.

<table border=1>
 <tr><td>aaa</td><td>bbb</td></tr>
 <tr><td>aaa</td><td>bbb1234567890bbb</td></tr>
 <tr><td>aaa</td><td>bbb</td></tr>
</table>

Мне нравится вырезать содержимое длинной ячейки с помощью CSS тд.Я не хочу вырезать содержимое.

Установка максимальной ширины желаемой ячейки сокращает ячейку, но не содержимое.Таким образом, содержимое перекрывает ячейку.

<table border=1>
 <tr><td>aaa</td><td>bbb</td></tr>
 <tr><td>aaa</td><td style="max-width: 30px;">bbb1234567890bbb</td></tr>
 <tr><td>aaa</td><td>bbb</td></tr>
</table>

Мне нужна уменьшенная ячейка без перекрытия (и без переноса слов).

Есть идеи, как это сделать?

Answer 1

В зависимости от того, какого результата вы хотите достичь, вы можете использовать

text-overflow: ellipsis;

или

text-overflow: clip;

чтобы содержимое не перекрывало ячейку.

Дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Answer 2

Вам необходимо установить свойство переполнения на td.Вы не сказали, что вы хотите сделать с переполнением, поэтому я показал три варианта:

• прокрутка переполнения
• переполнение скрыто
• переполнение скрыто многоточием

td {
  max-width: 30px;
  white-space: nowrap;
}

.with-overflow {
  overflow: auto;  /* adds scollbars if needed */
}

.without-overflow {
  overflow: hidden;  /* just hides any overflow */
}

.with-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;   /* just hides any overflow and appends ... to the end of the string */
}

<table border=1>
  <tr>
    <td>aaa</td>
    <td>bbb</td>
  </tr>
  <tr>
    <td>aaa</td>
    <td class="with-overflow">adds scroll bars</td>
  </tr>
  <tr>
    <td>aaa</td>
    <td class="without-overflow">without overflow</td>
  </tr>
  <tr>
    <td>aaa</td>
    <td class="with-ellipsis">with ellispsis</td>
  </tr>
</table>

Дополнительная информация о переполнении

Дополнительная информация о переполнении текста

Answer 3

Я не уверен, правильно ли я вас понимаю. Но я думаю, что переполнение: скрытое вместе с переполнением текста: многоточие может решить вашу проблему.

  td {
      max-width:100px;
      overflow: hidden;
      text-overflow:ellipsis;
  }

https://plnkr.co/edit/Gti1qhErZlTMjr8m7sIG?p=preview