Diminuir automaticamente o tamanho da fonte para palavras longas

4

Estou trabalhando em um site de comércio eletrônico no qual os títulos de postagem e de produto precisarão ser exibidos em divs bastante restritos. Gostaria de definir um tamanho de fonte específico para palavras que podem caber naturalmente no espaço fornecido, enquanto instrui palavras que são muito longas para que a largura do objeto pai seja reduzida automaticamente, evitando assim a necessidade de hifenização. Parece que alguém deve ter pensado em uma maneira de fazer isso antes, mas não consegui encontrar nenhuma solução na Web. O mais próximo que encontrei de uma resposta é o plug-in jQuery do BigText , mas isso é realmente projetado para situações em que você pode prever suas próprias quebras de linha. Como meus títulos serão consultados pelo Wordpress e inseridos completamente em divs, esse plug-in reduziria meus textos até que cada palavra coubesse em uma linha, o que não é o que estou procurando. Por favor, deixe-me saber se você tem alguma sugestão. Muito obrigado seu tempo! Melhor, Jonathan

    
por jfudem 17.06.2012 / 10:15

1 resposta

5

Eu fiz algo semelhante, adotando a abordagem simples de adicionar uma classe CSS aos títulos com base na contagem de caracteres deles. Essa classe CSS então diminui letter-spacing e / ou font-size .

// Count the characters, taking Unicode into account
$chars = mb_strlen($post->post_title);

// For every 10 characters after the first 20, add a size
$size = max(0, ceil(($chars - 20) / 10));

// Generate the CSS class: x-long, xx-long, etc.
$class = ($size) ? str_repeat('x', $size).'-long' : '';

// Output
echo '<h1 class="'.$class.'">'.esc_html($post->post_title).'</h1>';

Esta abordagem é bastante ingênua, no entanto. Não leva em conta a largura real do caractere conforme processado pela fonte. Para isso, você precisa de uma abordagem de JavaScript.

    
por Geert 17.06.2012 / 10:52