Vertically truncate text containing <br/> - html

Question

I have this :
<table>
<tr>
<td>
<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
<br/>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
<br/>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
<br/>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
<br/>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
<br/>non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</td>
</tr>
</table>
How can I set the row height? I would like the extra lines to be vertically truncated. I've already try :
td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
and it works fine horizontally but not vertically. Do you have any tricks? Sometimes css feels like doing voodoo.

Answer 1

I believe table cells and rows grow to the height of the content that is inside of them. I don't think it would be possible without wrapping the content in your in a div, and then applying styling to limit the size of that div....
Also, it appears as if the line breaks () mess up the word wrapping...
Here is an example: jsFiddle showing text-overflow in td
Here is the code I used:
(html)
<table>
<tr>
<td>
<div class="container-td">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</td>
</tr>
(CSS)
.container-td {
height: 100px;
line-height: 100px;
width: 200px;
overflow: hidden;
border: 1px solid #ccc;
white-space: nowrap;
text-overflow: ellipsis;}