No - this isn't really possible. I do question your decision to keep the footer navigation above the fold, though. The fold really isn't important as once thought - I don't feel like looking up the articles, but there is plenty of research on that. And besides, your primary navigation shouldn't be in your footer.
As Keith said, there isn't a built-in way to write the CSS such that it "snaps" the overflow to a line. That said, you could do something like making the cut-off point (the image height) an integer multiple of the height of a line of text. It looks like you have some larger text in there as well (the "Welcome to...") you may need to add a fixed amount to that value, which would complicate things.
You may find that you need to use Javascript to set the styling such that the cut-off point falls in between lines.
In order to do that you need to:
- Find out the height in pixels of a line
- Have all lines of the same height
For #1, setting a line-height in pixels may do the trick (I haven't tested it) but it can affect your layout in monitors with different DPI settings (you set font sizes in relative units, don't you?). Otherwise, you can render a dummy DOM node with two lines and read its height from its computed style.
For #2, I'm unsure. Having no pictures, subscripts or superscripts is a good beginning.
Whatever, I'm pretty sure it's not worth the effort. Users are not as smart as developers think but they aren't as dumb as usability experts believe.
You could apply a semi-transparent gradient above the "More »" bar, so it looks like the text is fading out, making the cut bottoms less of a problem.