Line breaking by changing css

Question

I’m working with grids and I need to know if there’s any way to capture the box line number (Usually 1) to decrease the source number so it fits in the box so it only takes one line.

Note: I have tried Autofill in js, but in case the div height is not fixed, so it does not work.

Example and additional explanation here.

Answer 1

One way to do it would be to count the number of characters and change the CSS with jQuery depending on the size.

Example:

jQuery(document).ready(function($) {
    $('#box p').each(function(index, el){
        $texto = $(this).text().trim();
        $len = $texto.length;
        if($len > 29 && $len <= 56){
         $(el).css('font-size','17px');   
        } else if($len > 56){
         $(el).css('font-size','8px');   
        }
    }); 
});

#box{width:400px;border:1px solid #999;padding:5px;margin:0 auto;}
#box p{font-size:34px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box">
    <p> Vestibulum id aliquet ligula.  </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare risus sit amet metus vestibulum volutpat.</p>
</div>