使用 Twitter 引导程序，我怎样才能做到表中没有自动换行而不破坏列？

Question

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

我现在想使用text-overflow: ellipsis，以便任何可能被自动换行的文本都使用省略号截断。不过，我似乎无法将此 CSS 应用于任何东西并让它工作。无论我在哪里应用它，似乎什么都没有发生。表始终超出所需的网格列。

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

Answer 1

这是这篇文章中的一个技巧 带有 td nowrap 和文本溢出的流体表？ 效果很好：

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