javascript - 使用字母间距填充 div

Question

我遇到的问题是使用 letter-spacing 用文本填充 div。主要问题是，我不知道 div 的宽度。

首先我在考虑使用 text-align= justify，但从那以后我一直在摸索，不知道如何解决这个问题。我猜一些脚本魔法可能会起到作用。

一个 imgur 链接让你明白我的意思:

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

这是一个展示示例的链接； <强> JSfiddle .

Answer 1

根据发帖人的评论，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