Reducir automáticamente el tamaño de fuente para palabras largas

4

Estoy trabajando en un sitio de comercio electrónico en el que las publicaciones y los títulos de los productos deberán mostrarse en divs bastante estrechos. Me gustaría establecer un tamaño de fuente específico para las palabras que puedan caber naturalmente en el espacio provisto, mientras que instruyo palabras que son demasiado largas para que el ancho del objeto principal se reduzca automáticamente, evitando así la necesidad de guiones. Parece que alguien debe haber pensado en una forma de hacer esto antes, pero no he podido encontrar ninguna solución en la web. Lo más cercano que he encontrado a una respuesta es el BigText jQuery plugin , pero esto es realmente Diseñado para situaciones en las que puedes predecir tus propios saltos de línea. Debido a que Wordpress consultará mis títulos y los insertará por completo en divs, este complemento reduciría mis textos hasta que cada palabra pudiera caber en una línea, que no es lo que estoy buscando. Por favor, hágamelo saber si tiene alguna sugerencia. Muchas gracias por tu tiempo! Mejor, jonathan

    
pregunta jfudem 17.06.2012 - 10:15

1 respuesta

5

He hecho algo similar con el enfoque simple de agregar una clase de CSS a los títulos según el número de caracteres. Esa clase de CSS luego disminuye letter-spacing y / o 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>';

Sin embargo, este enfoque es bastante ingenuo. No tiene en cuenta el ancho real de caracteres representado por la fuente. Para eso, necesitarías un enfoque de JavaScript.

    
respondido por el Geert 17.06.2012 - 10:52

Lea otras preguntas en las etiquetas