标签包装时javascript AngularJS自动更改字体大小

Question

I have a project developed using AngularJS and Bootstrap. The system should support all languages, and all the labels should switch whenever the user selects a different language.

This is working ok except for one thing: The same sentence displays different length in different languages. As a result, some labels exceed the allocated width and spoil the way things are being display.

Due to the structure of the page, I cannot use wrapping.

I would like to detect whenever a label's length exceeds the allocated space and automatically reduce the font size till it fits (you can see an example in Google Translate).

Any suggestions how this can be done?

Thanks.

Answer 1

It's a little tricky and not so generic but it's definitely direction. Of course that you will need to do some fine tunings for your needs.

I was created a directive for this based on (with my fixes) this answer .

Read the comments in the code:

 angular.module('myApp', []). controller('ctrl', function(){}). directive('label', function() { function resize_to_fit(element) { // check the font-size. In the second time it will return the value with "px" so we need to remove it. var fontsize = element.css('font-size'); if (fontsize.length) { fontsize = fontsize.replace('px', ''); } // check the current height var orgHeight = element.css('white-space','normal').height(); // check the height it should be in one line var singleLineHeight = element.css('white-space','nowrap').height(); // check if the element have 1 line or more if(orgHeight > singleLineHeight) { // reduce the font size in 1 element.css('fontSize', parseFloat(fontsize) - 1); resize_to_fit(element); } else { // finally remove the "white-space" - you can remove this line if you don't need it. element.css('white-space','normal'); } } return { link: function(scope, element) { resize_to_fit(element); } } }); 

 <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> 

http://jsbin.com/dokuwew/edit?html,css,js