Обтекание текста внутри таблицы в зависимости от ширины экрана - PullRequest
Новая
       16

Обтекание текста внутри таблицы в зависимости от ширины экрана

0 голосов
/ 03 мая 2020

Я хочу обернуть однострочный текст внутри таблицы с учетом изменения ширины экрана. Таблица занимает 100% ширины экрана, и я хочу обернуть текст только в одну строку (обтекание многоточием, если оно переполняет ширину содержимого) после изменения размера окна. Я мог добиться только переноса текста при указании фиксированной ширины в пикселях. JSFiddle: https://jsfiddle.net/4vo7p58c/5

Проблема в том, что без фиксированного элемента width на td он не переносит текст, а после горизонтального изменения размера окна окно строка разбивается на две строки, вместо этого оборачивая текст по ширине экрана

1 Ответ

2 голосов
/ 03 мая 2020

Вы почти с вашим кодом,

td по умолчанию table-cell элемент, который обычно отличается от inline-block или block.

Если вы хотите использовать значение ellipsis, у вас должна быть ширина для td, это обеспечит переполнение содержимого и будет использовать либо display:block/inline-block; для вашей цели, это работает для обоих. 

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid red;
  table-layout: fixed;
}

th {
  text-align: left;
  border-bottom: 1pt solid #4C4C4C;
  border-right: 1pt solid #4C4C4C;
  padding: 8px;
  width: 20%;
}

td {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  border: 1px solid #000000;
  word-wrap: break-word;
}
<div class="External">
  <table>
    <tr>
      <th>First Element</th>
      <td>Text</td>
    </tr>
    <tr>
      <th>Second Element</th>
      <td>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</td>
    </tr>
    <tr>
      <th>Third Element</th>
      <td>Text</td>
    </tr>
    <tr>
      <th>Fourth Element</th>
      <td>Text</td>
    </tr>
  </table>
</div>
...