css - 使用 twitter bootstrap，我怎样才能做到在不破坏列的情况下表格中没有自动换行？

Question

我正在使用 Bootstrap 并试图在 table 的 td 元素中禁用自动换行。我已将 white-space: nowrap 应用于 td 元素，这会按预期禁用自动换行，但现在 table 本身将跨越超出它所在的列。因此，仅此 CSS 似乎就破坏了 Bootstrap 。

我现在想使用 text-overflow: ellipsis，这样任何想要自动换行的文本都会被省略号截断。不过，我似乎无法将此 CSS 应用于任何内容并使其正常工作。无论我在哪里应用它，似乎都没有发生任何事情。表格总是扩展到所需的网格列之外。

如何在 td 元素中禁用换行，并使用省略号截断文本而不破坏网格？

Answer 1

这是这篇文章中的一个技巧 Fluid table with td nowrap & text-overflow?效果很好:

在<td>里面放一个div包含文本，然后为 div 设置样式:

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 0;
min-width: 100%;

即表看起来像:

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <table class="table table-striped">
      <thead> 
        <tr> 
          <th>#</th> 
          <th>First Name</th> 
          <th>Last Name</th> 
          <th>Username</th> 
        </tr> 
      </thead> 
      <tbody> 
        <tr> 
          <th scope="row">1</th> 
          <td>
            <div style= "text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 0;
min-width: 100%;">
              Mark really long text that need to be wrapped ywey yd syd ysd syd skd ysyd sad ysd syjdk skjdy sjd hdhjd hjd hjd hjds hjds dhj dsjhds js hs jsd hjsdhs dhs djs 
            </div>

           </td> 
           <td>Otto</td> 
           <td>@mdo</td> 
         </tr>
       </tbody> 
      </table>
    </div>
  </div>
</div>