Question

I’m currently inlcuding a facebook like button like this

<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
(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>
...
<span class="fb-like"></span>

My problem:

The like text is too wide. Usually you use the data-tag to determine the width

<span class="fb-like" data-width="150"></span>

This would cause the document to be invalid (the data-tag is not XHTML-valid).
Is there any way to set the width without breaking the XHTML validation?

<span class="fb-like" style="width:50px;"></span>

won’t work cause the div inside the span class has a greater width.

Answer 1

I’m not sure I understand what you are going for, but I think is what you want:

<span class="fb-like" style="overflow: hidden; width: 50px;"></span>