I am using following code to display name dynamically:
<div id="name">{{profile.name}}</div>
Screen size is always 320px It works fine if name is short but if name is very long then name is broken in two lines that disturbs my layout. So I want to reduce font size automatically if name becomes too long...
So is there any way to watch content of div and apply different font size dynamically based on character length ?
Use ng-class to attach a class to the element when the name is long
<div id="name" ng-class="{'long': (profile.name.length > 20), 'verylong': (profile.name.length > 40)}">{{profile.name}}</div>
And then use the class to change font-size in your CSS.
<!DOCTYPE html>
<html>
<head>
<title>change font size according to text length</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<!--change text inside below division if the string length is 20 or more it's font size will be 14px else 50px-->
<div id="text">Hello There I'm testing this text font size...!!!</div>
<script type="text/javascript">
jQuery( document ).ready(function() {
var length = jQuery('#text').html().length;
//change length at which you want to change font-size
if(length >= 20){
//enter font-size if text is long
$("#text").css({'font-size':'14px'});
} else {
//enter font-size if text is short
$("#text").css({'font-size':'50px'});
}
});
</script>
</body>
</html>
You can change values according to your needs...! :) This Solution is for JQuery.
Create styles depending on how you want the characters look like:
.20char{font-size: 20px}
.50char{font-size: 10px}
Then in Angular, with the ng-model binded to the field, you can know how many characters have this field:
$scope.fontsize = "20char";
if($scope.field.length <= 20)
{
$scope.fontsize = "20char"
} else if ($scope.field.length > 20 && $scope.field.length <= 50)
{
$scope.fontsize = "50char"
}
And then in the HTML just bind the variable fontsize to the ng-class.
See that the variable fontsize value must match with the name of the class.
I think it should work.