问题
I have a sidebar 200px wide and the Facebook Like button I have placed inside it is running outside the boundaries of the DIV. Are there any workarounds to get the Like box text to recognise the 200px mark and reflow onto new lines when needed?
I am working with this code: http://jsfiddle.net/tKkpm/2/
<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&appId=437745402932329";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.facebook.com/google" data-send="false"
width="200" data-show-faces="false"></div>
回答1:
I'll put my comment as an answer...
The Facebook Like Button documentation states that the minimum width has to be 225 pixels.
The reason it can sometimes be less than that, is because you can use an iframe. Although smaller widths aren't fully supported, it does seem to work!
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fgoogle&send=false&layout=standard&width=200&show_faces=false&font&colorscheme=light&action=like&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:35px;" allowTransparency="true"></iframe>
Please note that you will have to set the width in two different places!
回答2:
The like box width is a problem. I have used overflow:hidden in CSS to make it work at the left sidebar at http://www.mineoppskrifter.no. The problem here is that the images are cut, but at least the width is ok.
#sidebar-left .fb-like-box {
width: 187px !important;
overflow:hidden;
}
Change #sidebar-left to the name of your div.
来源：https://stackoverflow.com/questions/14539092/cant-manipulate-width-of-facebook-like-button