CODEWITHSUNDEEP
htmlcss
koe
koe

Reputation: 746

how to dynamic style css set font by length of data

I have problem with css, I set font-size to company name = 12px, company name data get from database, some company name is too long (it's break line), so I want set dynamic style if long text, I want give it to smaller font-size more and more in the same line (no break line). any method to solve it? please help me if it's can.

#com_name {
  font-size: 12px;
}
<div class="com_name">
  <span>Company name: </span><span id="com_name"></span>
</div>

Upvotes: 0

Views: 44

Answers (4)

Prajapati Ghanshyam
Prajapati Ghanshyam

Reputation: 142

also try this

Use of the text-overflow property:

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

Upvotes: 0

Prajapati Ghanshyam
Prajapati Ghanshyam

Reputation: 142

using css 

 #com_name{
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */

}

Upvotes: 0

Hudson Taylor
Hudson Taylor

Reputation: 1162

You should use javascript and jQuery to check the length of the string and then use an if statement to style it accordingly. Something like this might work: 

if ($('#com_name').text().length < 12 /* Or however many you want */) {
   $('#com_name').css('font-size', '12px');
} else {
   $('#com_name').css('font-size', '5px');
}

Upvotes: 0

Nishit Manjarawala
Nishit Manjarawala

Reputation: 461

$( document ).ready(function() {
    var div=$("#your-id").html().length;
if(div > 10){
$("#your-id").css("font-size","10px");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='your-id'></div>

Upvotes: 1

Related Questions