CSS

CSS, max-height

I wish I had something of substance to add today, but I’ve been overwhelmed by personal stuff.  My oldest daughter has been sick with strep for the last week, so I’ve been having to rearrange a lot of my schedule so I can hang out with her when needed.  Consequently, I’m just wiped in the evenings. 

Anyway, you may have noticed that I’ve been playing around with my website, especially with my new blogroll page.  I”ve been adding some blogs to it using RSS feeds, and one thing has become clear: different RSS feeds behave differently when asked to return an item.  For example, some blog postings auto truncate themselves after a few phrases; for example, Brent Ozar:

Brent Ozar

[feedsnap, 1]http://feeds.feedburner.com/BrentOzar-SqlServerDba[/feedsnap]

Contrast this with Andy Warren’s feed:

It Depends (Andy Warren)

[feedsnap, 1]http://feeds.feedburner.com/itdepends[/feedsnap]

Now, while I like reading Andy’s stuff, I don’t necessarily want a bunch of lengthy articles on my blogroll page; I tried to figure out a way to limit the amount of text returned, when I tripped across this nifty CSS property: max-height. From DevGuru: The max-height property is used to set the maximum height of an element. Other properties can be used to set the height, width, maximum width, minimum height and the minimum width. This property is not inherited. (note that Devguru also specifies that this property is not currently supported by any browser; it works in IE7. Go figure).

Anyway, I simply add the max-height to my div container wrapped around the feedsnap plugin, and suddenly the RSS feed truncates after a certain pixel height.

<div style=”overflow:hidden;max-height:100px”></div>

It Depends (Andy Warren)

[feedsnap, 1]http://feeds.feedburner.com/itdepends[/feedsnap]

 

Anyway, I hope this puts some ideas in your head.