如何在引导响应表中使用省略号答案

【问题标题】：How to work with ellipsis in bootstrap responsive table如何在引导响应表中使用省略号
【发布时间】：2017-01-02 01:17:36
【问题描述】：

当th 中的数据增加时（随着col-xs-2 宽度的增加），在响应式表中text-overflow:ellipsis 不起作用。

代码如下：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th class="col-xs-2" style="text-overflow: ellipsis;">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</th>
        <th class="col-xs-1">Firstname</th>
        <th class="col-xs-1"> Lastname</th>
        <th class="col-xs-4">Age</th>
        <th class="col-xs-2">City</th>
        <th class="col-xs-2">Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
      </tr>
    </tbody>
  </table>
</div>

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3 css-position

【解决方案1】：

text-overflow 属性只影响溢出的内容阻止容器元素在其内联进展方向 MDN

要使text-overflow 起作用，单独指定text-overflow: ellipsis 不会有任何好处 - 您应该一起使用以下样式：

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

span, div, th, td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100px;
}

<span>Inline element overflow ellipsis do not work</span>
<div>Block elements overflow ellipsis works</div>
<table>
  <tr><th>Table - Overflow test</th></tr>
  <tr><td>This is a long text</td><td>This is a long text</td></tr>
</table>

表格布局中的文本溢出

所以text-overflow 适用于block 元素，但td 是table-cell 元素- 处理表格总是棘手，因为它们是使用默认表格布局呈现的算法。调整表格及其单元格的宽度以适合其内容。

通常指定获取省略号的常用属性可能会起作用：

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

如果它们不起作用或者您开始看到 表格算法 对您进行欺骗，那么您可以将它们与 max-width: 0

一起使用

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 0;

.table .text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th class="col-xs-2 text">
          Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
          </th>
          <th class="col-xs-1">Firstname</th>
          <th class="col-xs-1">Lastname</th>
          <th class="col-xs-4">Age</th>
          <th class="col-xs-2">City</th>
          <th class="col-xs-2">Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
        </tr>
      </tbody>
    </table>
  </div>

另一个hack是将文本包装在span 中的absolute 中，在td 中使用width: 100% 以及inline-block 以及inline-block 伪元素 .

.table .text {
  position: relative;
}

.table .text span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: absolute;
  width: 100%;
}

.text:before {
  content: '';
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th class="col-xs-2 text">
            <span>
          Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</span>
          </th>
          <th class="col-xs-1">Firstname</th>
          <th class="col-xs-1">Lastname</th>
          <th class="col-xs-4">Age</th>
          <th class="col-xs-2">City</th>
          <th class="col-xs-2">Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
        </tr>
      </tbody>
    </table>
  </div>

【讨论】：

行高：1；-webkit-line-clamp：1；-webkit-box-orient：垂直；溢出：隐藏；显示：-webkit-box；文本溢出：省略号；
这是迄今为止我见过的最好的解决方案。
使用相对位置和绝对位置的好技巧。我的情况有点不同，但仍然有效。谢谢
不错！解决方案#2 对我有用。我不想将表格或单元格的最大宽度设置为任何限制，因为我希望它们随表格一起增长/缩小。不知道为什么它会起作用，但是像你说的那样添加max-width: 0;，就可以了。

【解决方案2】：

从 Bootstrap 4 开始，您可以使用 .text-truncate 类执行以下操作。

<th class="col-xs-2 d-inline-block text-truncate" style="max-width: 150px;">

【讨论】：

但是如果您将表格宽度设置为填充可用宽度空间（宽度：100%），那么这将限制单元格宽度，而不是使其可以随表格增长和缩小。 @kukkuz 的解决方案 #2 对我有用。

【解决方案3】：

对 bootstrap 4 的另一个建议：

Github Docs

.table.table-ellipsis tbody td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

【讨论】：

【解决方案4】：

使用 Bootstrap 4，您可以使用 .text-truncate 类。它会自动为相关组件添加这些样式。

.text-truncate{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

然后您可以设置元素的最大宽度以获得更可靠的输出。

【讨论】：