javascript - 使用字母间距填充 div

Question

我遇到的问题是div使用letter-spacing. 主要问题是，我不知道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

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

为了将文本转换为跨度，您可以使用 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));
    }
});

为了获得更好的结果，请将 put letter-spacing: 0 删除到 #myText 中，以便应用任何额外的间距。

Answer 3

这显然是邪恶的，但由于没有直接的方法可以只用 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);

Answer 4

这可能会有所帮助：

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 则不必使用替换方法。或者你可以添加 letter-spacing:1px; 到你的 css 文件。

为避免溢出，请始终为父元素的高度赋予负数以进行正确的工作。

Answer 5

我为这个问题写的另一种方法Stretch text to fit width of div。它计算并应用字母间距，因此文本在页面加载和窗口调整大小时使用其容器中的全部可用空间：

演示

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