StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to limit a <td> to only three lines?
text
Body
copied!<p>I would like to achieve a unified look and feel across all my table rows. When you look at my example below you can see that the note in the middle goes over 4 lines and thats not so pretty.</p> <p><img src="https://i.stack.imgur.com/NgRbs.png" alt="enter image description here"></p> <p>I was hoping to limit all <code><td></code> to 3 lines. </p> <p>If there is more to be shown than three lines, then it should cut the content with <code>... [click for more]</code> and put the content inside a <a href="http://twitter.github.com/bootstrap/javascript.html#collapse" rel="nofollow noreferrer">collapseable element</a>, so that when clicked on it it would show the whole content.</p> <p>The latter shouldn't be a problem, but how do I limit the content to only three lines? Shall I count the characters to make the decision upon that? Is there a better strategy? I am using Django by the way,but I am happy to use javascript, jquery or any css magic instead to solve this.</p> <p><strong>Update:</strong></p> <p>The accepted answer is very good. However it comes with a caveat, which isn't easy to solve. if you have a neighbouring <code>td</code> that already goes over three lines, while the current td is only two lines we will get an infinite while loop.</p> <p><img src="https://i.stack.imgur.com/teW8r.png" alt="enter image description here"></p> <pre><code>while($(this).innerHeight() / $(this).css('line-height').slice(0,-2) >= 3){ .. } </code></pre> <p>Since <code>$(this).innerHeight()</code> can't decrease because of the neighbouring cell holding the height up high. I think if it was possible to get the css of the current td and copy it across the content completely in a separate field, where neighbouring tds can't interfere, we would get the optimal solution. </p> <p><strong>Update 2:</strong></p> <p>As Assad mentioned, the solution is to put a div wrapper around the content of <code>td</code> and set the class on the <code>div</code> inside the <code>td</code> rather than on the <code>td</code> itself. It works flawlessly.</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