Question

来源

origin

结果

result

我想将一个字符串拆分成字符，并使每个字符均匀地容纳容器，这是我暂时的工作：http://jsfiddle.net/d5fu9/

第一项必须附加到左侧，最后一项必须附加到右侧。

  $.fn.textjustify = function() {
        return this.each(function() {
            var text = $(this).text(),
                containerWidth = $(this).width(),
                character = '',
                string = '',
                singleWidth = 0,
                firstItemWidth = 0,
                lastItemWidth = 0,
                alignWidth = 0;

            if ('' !== text) {
                $(this).css('position', 'relative');
                textArray = text.split('');
                singleWidth = Math.floor(containerWidth / textArray.length);

                for (i in textArray) {
                    // Wrapp with div to get character width
                    character = ('' === $.trim(textArray[i])) ? '&nbsp' : textArray[i];
                    string += '<span>' + character + '</span>';
                }

                $(this).html(string);

                firstItemWidth = $(this).find('span:first').width();
                lastItemWidth = $(this).find('span:last').width();
                alignWidth = containerWidth - (firstItemWidth + lastItemWidth);

                $(this).find('span').each(function(i) {
                    if (0 === parseInt(i)) {
                        // The first item
                        $(this).css({position: 'absolute', left: 0, top: 0});
                    } else if ((parseInt(textArray.length) - 1) === parseInt(i)) {
                        // The last item
                        $(this).css({position: 'absolute', right: 0, top: 0});
                    } else {
                        // Other items
                        // stuck in here......
                        var left = (i * singleWidth) - $(this).width() + firstItemWidth;
                        $(this).css({position: 'absolute', left: left, top: 0});
                    }
                });

            }
        });
    }

停留在中间项目位置的算法中。

Answer 1

我认为这是最简单的解决方案。适用于所有浏览器（包括IE）

没有复杂（且不可靠）的宽度检测和计算。
未指定单词width / height
没有相对/绝对定位
使用纯HTML / CSS / JS / JQ技巧。

Working Fiddle

HTML：（非常简单）

<div class="Box">
    <div class="Centered">
        <div class="Spread">Lighting</div>
        <div class="Spread">我是中文</div>
    </div>
</div>

CSS：（整洁而棘手）

*
{
    margin: 0;
    padding: 0;
}
.Box
{
    width: 150px;
    height: 150px;
    border: 1px solid red;
    margin: 6px;
}
.Box:before
{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-left: -5px;
}
.Centered
{
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}
.Spread
{
    width: 100%;
    text-align: justify;
    font-size: 0;
}
    .Spread span
    {
        font-size: medium;
    }
.Spread:after
{
    content: '';
    display: inline-block;
    height: 0px;
    width: 100%;
}

<强> JS / JQ：

$.fn.SplitText = function () {
    return this.each(function () {
            return $(this).html('<span>' + $(this).text().split('').join(' ') + '</span>');
    });
}

$(function () {
    $('.Spread').SplitText();
})

<强>说明：正如 wared 在评论中所提到的，IE7不支持使用伪类。但它们不是解决方案所必需的。这是IE7的Fiddle（当然还有所有其他浏览器）。

垂直对齐如何工作？在vertical-align:middle;元素上使用inline时，它会将此元素的中间部分与同一行中的其他inline元素对齐。这就是我用inline创建height:100%;元素的原因，所以当我们将inline元素与中间对齐时，它实际上就是容器的中间位置。

水平分布如何运作？利用text-align:justify;，我们使用inline创建一个空的height:0;元素（width:100%;），我们可以想象它需要一个完整的行，而其余的文本需要第二行。使用justify使第二行均匀分布，将精确空间作为第一行。

如果您需要更多解释，请与我们联系。

Answer 2

我添加了一个固定用于spanelements为最宽的char，你的小提琴是15px W。

span {
    width: 15px;
}

然后从容器宽度减去20px，这将是后面两侧的自由空间。

singleWidth = Math.floor((containerWidth-20) / textArray.length);

将此额外空格添加到firstitemWidth，以便其他字符正确对齐：

firstItemWidth = $(this).find('span:first').width() + 10;

并在此处左右分别设置第一个和最后一个的位置：

if (0 === parseInt(i)) {
               // The first item
               $(this).css({position: 'absolute', left: 10, top: 0});
} else if ((parseInt(textArray.length) - 1) === parseInt(i)) {
               // The last item
               $(this).css({position: 'absolute', right: 10, top: 0});

以下是更新后的Fiddle

我希望这对你有用;）

Answer 3

如果您不介意左右空格，我已经为您制作了一个脚本。您可以设置右边距和左边距进行一些修改。

$(document).ready(function(){

    var txt = $(".container").text(); //get the text
    var txt2 = "";
    var len = txt.length;

    $(".container").empty();  //clear the content

    for(i=0; i<len; i++) //surround all characters with span
    {
        txt2 += "<span>" + txt.substr(i,1) + "</span>";    
    }

    $(".container").html(txt2);

    $("span").css({"width":  Math.round($(".container").width())/len + "px", "display":"inline-block", "text-align":"center"});
});

Fiddle is here

Answer 4

试试这个：

DEMO：http://jsfiddle.net/jc2mm/4/

JS：

$(".spread").each(function(idx, elem) {
    var titleElem = $(this),
        titleStr = titleElem.html(),
        charWidth = Math.floor(($(".box").width() / titleStr.length) * 100) / 100;

    titleElem.html("");

    for(var i = 0; i < titleStr.length; i++) {
        titleElem.append($("<span>", {"class" : "singleChar"}).css("width", charWidth).html(titleStr[i]));
    }
});

CSS：

.box {
    width: 150px;
    height: 150px;
    border: 1px solid red;
    margin: 6px;
}
.title {
    margin-top: 40px;
    height: 16px;
}
.singleChar {
    float: left;   
    text-align: center;
    display: block;
    min-height: 1px;
}

Answer 5

我做了这些东西：http://jsfiddle.net/wared/HDbA5/。

这个想法是使用填充来创建字符之间的空间。仅使用Chrome测试。当DIV没有明确的固定宽度时似乎失败了，有时还剩下一个像素，我没有调查过。最后，此脚本不支持单个字符。如果您对此答案感兴趣，这项工作适合您：）

我必须显示一些代码才能发布这个答案，所以，这里是：

<div><span>hello</span></div>

jQuery.fn.justify = function () {
    return this.each(function () {
        var el = $(this),
            ct = el.parent(),
            chars = el.text().split(''),
            bits = (chars.length - 1) * 2,
            freeSpace = ct.width() - el.width(),
            bitWidth = Math.floor(freeSpace / bits),
            gap = freeSpace % bits;
        el.html(jQuery.map(chars, function (char, i) {
            var paddings = ['0', null, '0', null];
            if (!i) {
                paddings[1] = (bitWidth + (gap && (--gap, 1))) + 'px';
                paddings[3] = '0';
            } else if (i + 1 === chars.length) {
                paddings[1] = '0';                
                paddings[3] = (bitWidth + (gap && (--gap, 1))) + 'px';
            } else {
                paddings[1] = (bitWidth + (gap && (--gap, 1))) + 'px';                
                paddings[3] = (bitWidth + (gap && (--gap, 1))) + 'px';
            }
            return '<span style="padding:' + paddings.join(' ') + '">' + char + '</span>';
        }).join(''));
    });
};

“位”是自由空间的一部分。它是两个字符之间的一半空间：

"abc"   : 4 bits ("a..b..c").
"ab cd" : 8 bits ("a..b.. ..c..d").

“间隙”是将空闲空间分成比特后剩余的像素数。将这些像素分配给每个“位”直到没有像素保留。我们说gap = 1：

bitWidth + (gap && (--gap, 1)) // gap = gap - 1 THEN bitWidth + 1
// next bit
bitWidth + (gap && (--gap, 1)) // bitWidth + 0

Answer 6

试试这个：http://jsfiddle.net/d5fu9/5/

每个字符都包含在宽度为singleWidth的框中，left计算前面的字符框，字符居中。变化：

$(this).css({width: singleWidth,position: 'absolute', left: 0, top: 0});

和

var left = i* singleWidth + (i-1)*(textArray.length-2)/(textArray.length+1);

并在CSS中：

.spread {
    text-align: center;
}

这是另一个版本http://jsfiddle.net/d5fu9/6/，其中最左边和最右边的字符附加到边框。

单个字符容器的修改宽度：

singleWidth = Math.floor((containerWidth -firstItemWidth - lastItemWidth)/ (textArray.length-2));

每个内部角色从左侧移动多少：

var left = firstItemWidth+(i-1)* singleWidth ;

需要将字符串拆分为字符并平均对齐容器

来源

结果

6 个答案: