With twitter bootstrap, how can I make it so that there's no word wrap in tables without breaking columns?

Question

I'm using Bootstrap and am trying to disable word wrap in td elements of a table. I've applied white-space: nowrap to the td element, which disables the word wrapping as expected, but now the table itself will span beyond the column that it is within. So, this CSS alone seems to be breaking bootstrap.

I'd like to use text-overflow: ellipsis now, so that any would-be-wordwrapped text is instead truncated using ellipsis. I can't seem to apply this CSS to anything and have it work, though. Nothing seems to happen regardless of where I apply it. The table always expands beyond the desired grid column.

How can I make it so that word wrapped is disabled, within td elements, and the text is truncated using ellipsis, without breaking the grid?

Answer 1

Here is a trick from this post Fluid table with td nowrap & text-overflow? that works well:

put a div inside the <td> to contain the text and then style the div with:

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

I.e table would look like:

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