Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <div ng-app="myApp" ng-controller="ctrl" class="container">
      <label class="col-xs-1">Lorem Ispum</label>
    </div>
  </body>
</html>
 
angular.module('myApp', []).
controller('ctrl', function(){}).
directive('label', function() {
  function resize_to_fit(element) {
    var fontsize = element.css('font-size');
    if (fontsize.length) {
      fontsize = fontsize.replace('px', '');
    }
    var orgHeight = element.css('white-space','normal').height();
    var singleLineHeight = element.css('white-space','nowrap').height();
    element.css('fontSize', parseFloat(fontsize) - 1);
    if(orgHeight > singleLineHeight){
      resize_to_fit(element);
    }
    else {
      element.css('white-space','normal');
    }
  }
  return {
    link: function(scope, element) {
      resize_to_fit(element);
    }
  }
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
moshfeupro
0viewers