2

Estou trabalhando com grids e preciso saber se há alguma forma de capturar o número de linha da box (Geralmente 1) para diminuir o número da fonte para que caiba na box de forma a ocupar somente uma linha.

Obs: Já testei autofill em js, mas no caso a altura da div não é fixa, por isso não funciona.

Exemplo e explicação adicional aqui.

1
  • Uma forma seria usar javascript e contar o número de caracteres strong.length, e testar com quantos caracteres a frase começa a quebrar.
    – KaduAmaral
    26/12/2014 às 18:14

1 Resposta 1

1

Uma forma de fazer seria contando o número de caracteres e alterar o CSS com jQuery conforme o tamanho.

Exemplo:

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>

1
  • Realmente funciona, mas uma solução mais responsiva ainda seria bem-vinda, já que trabalhando com % a quebra de linha pode acontecer ainda em resoluções pequenas. :) 26/12/2014 às 23:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .