Question

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

首先我正在考虑使用text-align= justify，但是因为我已经在黑暗中奔跑并且不知道如何解决这个问题。我猜测一些脚本魔法可能会成功。

一个imgur链接，让您了解我的意思：

what I have versus what I want

<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

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

这可能有所帮助：

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文件。

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

Answer 4

我为这个问题写的另一种方法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; }

Answer 5

另一种解决方案，如果你不必是语义（因为你会得到很多跨度），我的意思是如果你只需要视觉效果，那就是使用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));
    }
});

为了获得更好的效果，请将字母间距：0添加到#myText中，以便应用任何额外的间距。

使用字母间距填充div

5 个答案: