Menu
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 ?
679
The font-size-adjust property of CSS tells the browser to adjust the font size of the text to the same size regardless of font family. When the first chosen font is not available, the font-size-adjust property allows you more control over the font size.
In HTML, you can change the size of text with the <font> tag using the size attribute.
The font-size-adjust property gives you better control of the font size when the first selected font is not available.
The font-size CSS property sets the size of the font.
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.
103
<!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.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
