Truncating text in a table cell or a div

Hey guys,

i’ve been tryin all day to fix this (or at least try to understand whats happening) but I can’t figure this out.

I want to display a bit of content on my frontpage. There should be a table with in the left column the featured picture, and on the right the beginning of the post content.

Ive been searching the interwebs for a way to truncate the text in this table (so that it doesnt show the whole post but rather the first few lines) That gave me this code:

<style type="text/css">
.truncate {
  width: 50px;
  white-space: nowrap;
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

I’ve tried various ways; setting a fixed width and height for the tablecell in pixels, setting a fixed width and height in %. Ive tried it this way in the CSS, I’ve also tried

<td style="overflow: hidden">

That didnt work either.
Here is a screenrpint:

https://www.metalfrom.nl/wordpress/wp-content/uploads/2014/02/printscreen2.jpg

Thats what happens if you put the no-wrap in. Without the no-wrap:
https://www.metalfrom.nl/wordpress/wp-content/uploads/2014/02/printscreen3.jpg

Please tell me I’m being a moron and explain this to me.

I’ve also tried this with divs and div-tabels. Same thing; doesn’t work