title: Angular.js: how to get rendered text width from directive?
body: <p>I need to (dynamically) render text inside fixed-length buttons in a <em>ng-repeat</em> block.
  I would like to get DOM rendered text width (to be able to truncate it, and add an ellipsis entity...).<br>
  This is my html:</p>
  
  <pre><code> &lt;span ng-repeat="(key, item) in players" limit-text-length max-len="100"&gt;
      &lt;div class="btn"&gt;
        &lt;div id="player-{{key}}"&gt;{{item.name}}&lt;/div&gt;
      &lt;/div&gt;
   &lt;/span&gt;
  </code></pre>
  
  <p>This is my current directive:</p>
  
  <pre><code>app.directive('limitTextLength', function() {
    return function(scope, element, attrs) {
    var maxLen = attrs.maxLen;
    var el = element.find​("[id^=player-]"); // &lt;-- THIS DOESN'T WORK...
    if (el.width() &gt; maxLen) { // check text is not too wide
      while (el.width() &gt; maxLen) {
        var nameTruncated = el.html();
        nameTruncated = nameTruncated.substring(0, nameTruncated.length - 1);
        el.html(nameTruncated);
      }
      el.append('&amp;hellip;');
    }
  };
  </code></pre>
  
  <p>Any suggestion?</p>