Как ограничить ширину ячейки таблицы и скрыть переполнение содержимого - PullRequest
Новая
       7

Как ограничить ширину ячейки таблицы и скрыть переполнение содержимого

0 голосов
/ 14 февраля 2019

Я пытаюсь создать таблицу CSS с двумя столбцами (тоже пробовал таблицу HTML) с одной строкой, где первый столбец - одна строка текста, и он расширяется, чтобы соответствовать содержанию.Второй столбец должен представлять собой одну строку текста, которая выравнивается по правому краю и расширяется влево, пока не достигнет первого столбца, а затем не станет многоточием.

Этот первый столбец работает с white-space: nowrap;.Проблема возникает во втором столбце:

Если содержимое длиннее максимальной ширины второго столбца, оно будет перенесено.Как только я добавляю white-space: nowrap;, он переполняется и игнорирует width, max-width и overflow: hidden;

Вот JSFiddle, показывающий, что я получаю против того, что я пытаюсь получить.Спасибо!

https://jsfiddle.net/esodell1/oq59jkr3/10/

ОБНОВЛЕНИЕ

Спасибо за ответы, но я нашел способ сделать это, используя flex box!

https://jsfiddle.net/esodell1/jdykzv5m/13/

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

Так вот как работает метод переполнения текста.Должна быть определенная ширина его родителя или ближайшего родителя.Вам нужно будет определить ширину для вашей ячейки, например: 

&:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 85%; 
  text-align: right;
}

Но вам также придется ограничить вашу таблицу, так как таблица естественным образом пытается расширить столько, сколько требует содержимое в своем дочернем элементе, используяtable-layout: 

.table {
  display: table;
  padding: 0.25rem;
  table-layout: fixed;
  width: 100%;
}

. Правый столбец создаст многоточие, когда ячейка достигнет 85% доступной ширины.Проблема, с которой вы столкнетесь, связана с левым столбцом, потому что у вас также установлен no-wrap, чтобы столбец мог на самом деле превышать 15% ширины и перекрываться с правым.Проблема заключается в том, что ваша колонка пытается не переносить и борется за табличное пространство, вам нужно применить ту же технику text-overflow в левой колонке.Смотрите предыдущий и последний пример здесь:

https://jsfiddle.net/bhL6sx0g/

Если честно, если вы имеете дело со многими столбцами с динамическим содержимым, которые вы не хотите переносить, вы можете захотетьчтобы добавить слой JS сверху, чтобы сделать некоторые размеры для вас, в противном случае лучше всего делегировать фактическую ширину, такую ​​как разделение 15/85, и придерживаться ее.

0 голосов
/ 14 февраля 2019

Редактировать:

Дать единицы измерения ширины в vw (ширина области просмотра).Обратите внимание на изменения в scss таблицы (width), first-child (width, min-width) и last-child (width, max-width).

Этот vw будет вести себя странно в jsfiddle, попробуйте только .html. 

.table {
  display: table;
  padding: 0.25rem;
  width:90vw;

  .row {
    display: table-row;

    .cell {
      display: table-cell;
      border: 1px solid gray;
      padding: 0.25rem;

      &:first-child {
        white-space: nowrap;
        width:20vw;
        min-width:20vw;
      }

      &:last-child {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 70vw;
        max-width: 70vw;
        text-align: right;
      }
    }
  }
}

Предыдущий

По max-width:100% itможно растянуть, чтобы взять в полный размер родителя.Вам нужно ограничить его некоторым процентом или пикселями для достижения желаемого эффекта.

Удалено width:100%, поскольку оно было бесполезным и изменено max-width:200px

&:last-child {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* width: 100%; */
        max-width: 200px;
        text-align: right;
      }
...