css - 设置最大列宽并换行(最多两行)

Question

我正在使用 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;
}

它显示以“...”结尾的修剪后的列，但不知道如何实现我所需要的。

Answer 1

这里有一个 mixin，如果你在 scss 中编写 stryles，你可以指定最大宽度和文本在给出之前应该换行的行数和省略号(“...”)

    @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 添加到 Bootstrap 表的行中。 您还可以更改变量 $lineHeight:/Line Height/, $lineCount:/No of line to wrap to before ellipsis (in your case, it is 2)/, $bgColor:/背景颜色/