HTML - word full width

Question

Is it possible to fit the size of a word (variable) to full width (of a div element)?

Described at this JSFiddle: http://jsfiddle.net/HQ3sQ/2/

ofc

font-size:100%;

won't work - maybe a hack solution?

Answer 1

Not using just CSS, but you can use a Javascript library like FitText. It will measure the text and adjust it until it fits.

Answer 2

You can use this jquery snippet :

FIDDLE

It calculates the letter-spacing to apply so the text and stretches it to 100% of the width of the container.

$.fn.strech_text = function(){
    var elmt          = $(this),
        cont_width    = elmt.width(),
        txt           = elmt.html(),
        one_line      = $('<span class="stretch_it">' + txt + '</span>'),
        nb_char       = elmt.text().length,
        spacing       = cont_width/nb_char,
        txt_width;

    elmt.html(one_line);
    txt_width = one_line.width();

    if (txt_width < cont_width){
        var  char_width     = txt_width/nb_char,
             ltr_spacing    = spacing - char_width + (spacing - char_width)/nb_char ; 

        one_line.css({'letter-spacing': ltr_spacing});
    } else {
        one_line.contents().unwrap();
        elmt.addClass('justify');
    }
};


$(document).ready(function () {
    $('.stretch').each(function(){
        $(this).strech_text();
    });
});