StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Use the CSS property <a href="http://www.w3schools.com/cssref/pr_text_white-space.asp" rel="noreferrer">white-space: nowrap</a> and <a href="http://www.w3schools.com/cssref/pr_pos_overflow.asp" rel="noreferrer">overflow: hidden</a> on your td.</p> <h2>Update</h2> <p>Just saw your comment, not sure what I was thinking, I've done this so many times I forgot how I do it. This is approach that works well in most browsers for me... rather than trying to constrain the td, I use a div inside the td that will handle the overflow instance. This has a nice side effect of being able to add your padding, margins, background colors, etc. to your div rather than trying to style the td.</p> <pre><code><html> <head> <style> .hideextra { white-space: nowrap; overflow: hidden; text-overflow:ellipsis; } </style> </head> <body> <table style="width: 300px"> <tr> <td>Column 1</td><td>Column 2</td> </tr> <tr> <td> <div class="hideextra" style="width:200px"> this is the text in column one which wraps</div></td> <td> <div class="hideextra" style="width:100px"> this is the column two test</div></td> </tr> </table> </body> </html> </code></pre> <p>As a bonus, IE will place an ellipsis in the case of an overflow using the browser-specific text-overflow:ellipsis style. There is a way to <a href="http://www.jide.fr/emulate-text-overflowellipsis-in-firefox-with-css" rel="noreferrer">do the same in FireFox</a> automatically too, but I have not tested it myself.</p> <h2>Update 2</h2> <p>I started using <a href="http://mattsnider.com/css/css-string-truncation-with-ellipsis/" rel="noreferrer">this truncation code</a> by Justin Maxwell for several months now which works properly in FireFox too.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload