Line break by changing css

Navigation
2

I'm working with grids and I need to know if there is any way to capture the box number (usually 1) to decrease the font number so that it fits in the box so that it occupies only one line.

Note: I have already tested autofill in js, but in case the height of the div is not fixed, so it does not work.

Example and further explanation here .

    
asked by anonymous 26.12.2014 / 18:57

1 answer

1

One way to do this would be by counting the number of characters and changing the CSS with jQuery by 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><divid="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>
    
26.12.2014 / 19:34
How to add a Label inside a TextBlock by code behind Handle two lists of a Drag and Drop component on different ManagedBeans