使用字母间距填充div

根据海报的评论,JavaScript似乎没有问题。以下是解决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');
    });
});

使现代化

包装太小时的小调整: JSFiddle 2

如果你不需要语义(因为你会得到很多跨度),我的意思是如果你只需要视觉结果,另一个解决方案是使用flexbox。

所以你有你的 <div id="#myText">TEXT 1</div>

我们需要做到这一点:

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

因此,您可以应用CSS:

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

为了将文本转换为span,您可以使用jQuery或其他方法。这里有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));
    }
});

为了获得更好的结果,请在#myText中删除字母间距:0,以便应用任何额外的间距。

这显然是邪恶的,但由于没有直接的方法可以只使用css,所以您可以这样做: 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);

这可能有助于:

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'));

注意:如果字母间距为:0,则不必使用替换方法。或者您可以添加字母间距:1px;到css文件。

为了避免溢出,请始终为父元素的高度指定负数,以便正确工作。

我为这个问题写的另一种方法 Stretch text to fit width of div 。它计算并应用字母间距,以便文本使用其容器中的所有可用空间 页面加载和窗口调整 :

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;
}