Filling div using letter-spacing

问题

The problem I'm having is filling a div with text using letter-spacing. The main issue is, I don't know the width of the div.

First I was thinking using, text-align= justify, but since that I've been running in the dark and got no clue to how to solve this. I'm guessing some scripting magic might do the trick.

An imgur link giving you an idea what I mean:

what I have versus what I want

<div id="container">
 <h1>Sample</h1>
 <p>Another even longer sample text</p>
</div>

Here is a link showcasing an example; JSfiddle.

回答1:

Based the comment of the poster it seems JavaScript is no problem. Here's a possible approach to solve the problem with jQuery:

JSFiddle 1

function dynamicSpacing(full_query, parent_element) {
    $(full_query).css('letter-spacing', 0);
    var content = $(full_query).html();
    var original = content;
    content = content.replace(/(\w|\s)/g, '<span>$1</span>');
    $(full_query).html(content);

    var letter_width = 0;
    var letters_count = 0;
    $(full_query + ' span').each(function() {
        letter_width += $(this).width();
        letters_count++;
    });

    var h1_width = $(parent_element).width();

    var spacing = (h1_width - letter_width) / (letters_count - 1);

    $(full_query).html(original);
    $(full_query).css('letter-spacing', spacing);
}

$(document).ready(function() {
    // Initial
    dynamicSpacing('#container h1', '#container');

    // Refresh
    $(window).resize(function() {
        dynamicSpacing('#container h1', '#container');
    });
});

Update

Small tweak for when the wrapper gets too small: JSFiddle 2

回答2:

This is obviously evil, but since there is no straight forward way to do it with just css, you could do: demo

HTML:

<div>text</div>

CSS:

div, table {
    background: yellow;
}
table {
    width: 100%;
}
td {
    text-align: center;
}

JS:

var text = jQuery("div").text();
var table = jQuery("<table><tr></tr></table>").get(0);
var row = table.rows[0];
for (var i = 0; i < text.length; i++) {
    var cell = row.insertCell(-1);
    jQuery(cell).text(text[i]);
}
jQuery("div").replaceWith(table);

回答3:

This may help:

function fill(target) {
    var elems = target.children();

    $.each(elems, function(i,e) {  

        var x = 1;
        var s = parseInt($(e).css('letter-spacing').replace('px',''));

        while(x == 1) {
            if($(e).width() <= target.width() - 10) {
                s++;
                $(e).css('letter-spacing', s+'px');
            } else {
                x = 0;
            }

        }
    });
}

fill($('#test'));

Note: If letter spacing is : 0 then you don't have to use replace method. Or you can add letter-spacing:1px; to your css file.

For avoiding overflow, always give minus number to parent element's height for correct work.

回答4:

An other approach I wrote for this question Stretch text to fit width of div. It calculates and aplies letter-spacing so the text uses the whole available space in it's container on page load and on window resize :

DEMO

HTML :

<div id="container">
    <h1 class="stretch">Sample</h1>
    <p class="stretch">Another even longer sample text</p>
</div>

jQuery :

$.fn.strech_text = function(){
    var elmt          = $(this),
        cont_width    = elmt.width(),
        txt           = elmt.text(),
        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();
    });
    $(window).resize(function () { 
        $('.stretch').each(function(){
            $(this).strech_text();
        });
    });
});

CSS :

body {
    padding: 130px;
}

#container {
    width: 100%;
    background: yellow;
}

.stretch_it{
    white-space: nowrap;
}
.justify{
    text-align:justify;
}

回答5:

Another solution if you don't have to be semantic (because you will get many spans), I mean if you need only the visual result, is to use flexbox.

So you have your <div id="#myText">TEXT 1</div>

We need to get this:

<div id="#myText">
    <span>T</span>
    <span>E</span>
    <span>X</span>
    <span>T</span>
    <span>&nbsp;</span>
    <span>1</span>
</div>

So then you can apply CSS:

#myText {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

In order to transform the text to span you can use jQuery or whatever. Here with jQuery:

var words = $('#myText').text().split("");
$('#myText').empty();
$.each(words, function(i, v) {
    if(v===' '){
        $('#myText').append('<span>&nbsp;</span>');
    } else {
        $('#myText').append($("<span>").text(v));
    }
});

For better results remove put letter-spacing: 0 into #myText so any extra spacing will be applied.

来源：https://stackoverflow.com/questions/22430735/filling-div-using-letter-spacing

标签

javascript

css

html

letter-spacing