如何在Bootstrap响应表中使用省略号 [英] How to work with ellipsis in bootstrap responsive table

问题描述

在响应表中，当th中的数据增加时(col-xs-2宽度增加)，text-overflow:ellipsis不起作用.

In a responsive table text-overflow:ellipsis is not working when the data increases in the th (as the col-xs-2 width increases).

以下代码:

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

推荐答案

text-overflow属性仅影响溢出内容的内容. 沿其行进方向阻止容器元素 MDN

The text-overflow property only affects content that is overflowing a block container element in its inline progression direction MDN

要使text-overflow正常工作，单独指定text-overflow: ellipsis不会有任何好处-您应同时使用以下样式:

For text-overflow to work, specifying text-overflow: ellipsis alone will not do any good - you should use the following styles together:

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元素-表始终是 tricky 要处理的，因为它们是使用默认表布局呈现的算法.调整表格及其单元格的宽度以适合其内容.

So text-overflow applies to block elements but td is a table-cell element - tables are always tricky to deal with because they are rendered using the default table layout algorithm. The widths of the table and its cells are adjusted to fit their content.

1. 通常指定用于获取省略号的常规属性可能会起作用:

1. Normally specifying the usual property for getting ellipsis may work:

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

如果它们不起作用，或者您开始​​发现表算法对您造成了麻烦，那么您可以将它们与max-width: 0

If they do not work or you begin to see the table algorithm do tricks on you, then you can use them along with 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 是将文本包装在td内absolute中的span中，该absolute与width: 100%一起以及inline-block 伪元素.

Another hack is to wrap the text in a span positioned absolute inside the td with width: 100% along with an inline-block pseudo element.

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

这篇关于如何在Bootstrap响应表中使用省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！