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


Tags: css,twitter-bootstrap

Problem :

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?



Solution :

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>

    CSS Howto..

    How To Use CSS To Add Multiple Fonts In One Paragraph And How To Add Multiple CSS Properties To One CSS Id?

    How to change just the css inside a DIV and not anywhere else?

    How to ease the whole css animation

    How to put images behind each other in css

    I have a CSS file in my App_Themes folder - how can I apply it to my web user control?

    How can I edit CSS on an HTML tab?

    How to design the vertical scroll bar or customize the vertical scroll bar design?

    How to reduce my code in both jQuery and CSS

    jQuery Show/Hide for and

    How to spin and rotate in css?

    How do I get a CSS class to show up in my javascript with my previous method?

    Jquery - 100% width slideshow whilst keeping the height propotional

    How can I resize my iframe keeping the ratio?

    How to changing css on bootstrap button Group

    How to center image with full height and variable width

    How can I make this kind of a border?

    How to realize a gradient like this with css

    How to get the complete css information if css class is given form the used style sheets files

    How to create table with resizable row and columns like HTML, CSS, JS boxes on JSFiddle?

    How to let a div behave like another div?

    How to implement a table structure using CSS

    How to hide text using CSS?

    How to style more than one ul

    How to override group of css class?

    How to use jQuery to fade in/out li a:hover css background-color?

    How to limit input text length using CSS3? [duplicate]

    CSS how to automatically resize div size?

    How can I caption an image inside a paragraph

    ?

    How to displaying and hiding again the div after clicking a button

    How do I find out if a CSS class exists in a StyleSheet? [duplicate]