fluid facebook "like" button?

I have a facebook "like" button on my website, I'd like to make it fluid as the container it is in is fluid and when the container is sm开发者_开发百科aller than the button there is an overflow. I'd like to keep the text and buttons the same size, id just like to have the overflowing text break off to the next line... there is plenty of results in a google search for customizing this, but I havent found anything that will do line breaks according to a fluid width. Thanks!

Perhaps I'm not understanding what you're after, but text wrapping should happen automatically with something like this:

<style type='text/css'>
#wrapper { width: 250px }
#like { border: none; width: 100%; background-color: transparent }
</style>

<div id='wrapper'>
<iframe id='like' src='http://www.facebook.com/plugins/like.php?href=xxx' scrolling='no' frameborder='0' allowtransparency='true'></iframe>
</div>

You can change the width of the wrapper div and the Like text will wrap as needed.

The XFBML doesn't work the same way, but you can cut off the text by fixing a width:

<style type='text/css'>
#like { width: 104px; overflow: hidden }
</style>

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<fb:like id='like' href="xxx" send="true" show_faces="false" layout="standard"></fb:like>