Question

在text-overflow:ellipsis中数据增加时（th宽度增加），响应表col-xs-2无法正常工作。

以下代码：

<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>

Answer 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以及{.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; }。 {1}} 伪元素。

<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>

END

Answer 2

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

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

https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow

Answer 3

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

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

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

Answer 4

引导4的另一个建议：

https://gist.github.com/marcoskubis/4bf343928703824d85d0ec1b301f3a63

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

如何在bootstrap响应表中使用省略号

4 个答案: