Need to split a string to character and align to the container equally

Viewed 2264

origin

origin

result

result

I want to split a string into character, and make each of the character fit the container equally, this is my work for the time being: http://jsfiddle.net/d5fu9/

The first item must attached to the left, and the last item must attached to the right.

  $.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});
                    }
                });

            }
        });
    }

stuck in the algorithm of middle items's position.

6 Answers
Related