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

zf9nrax1  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(5)|浏览(147)

在响应表中,当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>
4dbbbstv

4dbbbstv1#

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元素,但tdtable-cell元素-表格总是 * 棘手 * 难以处理,因为它们是使用 * 默认表格布局算法 * 呈现的。表格及其单元格的宽度将根据其内容进行调整。
1.通常,指定用于获取 * 省略号 * 的常用属性可能有效:

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

1.如果它们不起作用,或者您开始看到 *table算法 * 对您产生影响,那么您可以将它们与max-width: 0沿着使用

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

一个
1.另一个hack是用width: 100%和一个inline-block * 伪元素 * 将位于td内的absolute中的文本 Package 起来。

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

hc8w905p2#

从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

4szc88ey

4szc88ey3#

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

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

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

ifsvaxew

ifsvaxew4#

对bootstrap 4的另一个建议是:
Github Docs

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

ni65a41a5#

在Bootstrap 5中,您可以像其他人提到的那样,将text-truncate类添加到<td>中,例如:

<td class="text-truncate" style="max-width: 50px;">Some super long text...</td>

若要显示完整文本,请添加此CSS样式以在悬停时显示文本:

tr > td:hover {
    overflow: visible;
    white-space: unset;
}

相关问题