Установите максимальную ширину столбца и оберните слова (до двух строк) - PullRequest
Новая
       14

Установите максимальную ширину столбца и оберните слова (до двух строк)

0 голосов
/ 14 мая 2019

Я использую плагин Bootstrap Table: https://github.com/wenzhixin/bootstrap-table

Я бы хотел указать максимальную ширину каждого столбца, и если какое-то содержимое достигает этой максимальной ширины, то после этого оно должно обернуться до двух строк.содержимое должно быть обрезано и отображаться с окончанием "..."

Я добавил это в CSS моих таблиц: 

.tabla>thead>tr>th,
.tabla>tbody>tr>th,
.tabla>tfoot>tr>th,
.tabla>thead>tr>td,
.tabla>tbody>tr>td,
.tabla>tfoot>tr>td {
    padding: 2px;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.tabla{
    vertical-align: middle;  
    table-layout: fixed;
}

Это отображение обрезанных столбцов с окончанием "..."но не знаю, как добиться именно то, что мне нужно.

Ответы [ 2 ]

0 голосов
/ 14 мая 2019

это миксин, если вы пишете строчки в scss, вы можете указать максимальную ширину и количество строк, которые текст должен обернуть перед передачей, и многоточие ("...") 

    @mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 1, $bgColor: white){
        overflow: hidden;
        position: relative;
        line-height: $lineHeight;
        max-height: $lineHeight * $lineCount; 
        text-align: justify;
        margin-right: -1em;
        padding-right: 1em;
        &:before {
          content: '...';
          position: absolute;
          right: 0;
          bottom: 0;
        }
        &:after {
          content: '';
          position: absolute;
          right: 0;
          width: 1em;
          height: 1em;
          margin-top: 0.2em;
          background: $bgColor;
        }
      }

  .multi-line-ellipsis {
    @include multiLineEllipsis($lineHeight: 1.2em, $lineCount: 2, $bgColor: white);  
  }

Просто добавьте класс multi-line-ellipsis в строки вашей таблицы начальной загрузки. Также вы можете изменить переменные $ lineHeight: / Высота строки /, $ lineCount: / Нет строки для переноса до многоточия (в вашем случае это 2) /, $ bgColor: / Цвет фона /

0 голосов
/ 14 мая 2019

Попробуйте поместить текст тега td в span и дать ему имя класса со свойством:

word-break: break-word;

Пример

HTML:

<td><span class="table-text">{{your text}}</span></td>

CSS: 

.tabla>thead>tr>th,
.tabla>tbody>tr>th,
.tabla>tfoot>tr>th,
.tabla>thead>tr>td,
.tabla>tbody>tr>td,
.tabla>tfoot>tr>td {
    padding: 2px;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.tabla{
    vertical-align: middle;  
    table-layout: fixed;
}

.table-text { word-break: break-word; }

У меня нет устройства для проверки результата, но слова в теге span должны переноситься в конце ширины столбца и соответствовать свойству тега td.

Другой идеей было бы просто иметь class="table-text" для внутреннего диапазона со следующими свойствами:

Не имея возможности взглянуть на ваш HTML-код, его сложно протестировать должным образом. Но мне удалось создать этот фрагмент кода 

.table-text {
    margin: 2px;
    border: solid 2px blue;
    /* vertical-align: middle; */
    display: block;
    display: -webkit-box;
    /* Relates to display width */
     -webkit-box-orient: vertical;
    /* Your line height */
    line-height: 1em;
    /* Double your line height
    for max-height to have 2 lines */
    max-height: 2em;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
 <div class="table-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </div>
...