html - 如何在 Bootstrap 响应表中使用省略号

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

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 不会有任何好处 - 您应该同时使用以下样式:

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 元素 - 表格是处理起来总是棘手，因为它们是使用默认表格布局算法呈现的。调整表格及其单元格的宽度以适合其内容。

1. 通常指定用于获取省略号 的常用属性可能有效:

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

2. 如果它们不起作用，或者您开始​​发现表格算法 在欺骗您，那么您可以将它们与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>

3. 另一个hack 是将文本包装在span 中，定位在td 内的absolute 中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;
   }

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