title: Need to split a string to character and align to the container equally
body: <h3>origin</h3>
  
  <p><img src="https://i.stack.imgur.com/eOmlH.png" alt="origin"></p>
  
  <h3>result</h3>
  
  <p><img src="https://i.stack.imgur.com/9CdVY.png" alt="result"></p>
  
  <p>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: <a href="http://jsfiddle.net/d5fu9/" rel="nofollow noreferrer">http://jsfiddle.net/d5fu9/</a></p>
  
  <p>The first item <strong>must</strong> attached to the left, and the last item <strong>must</strong> attached to the right.</p>
  
  <pre><code>  $.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])) ? '&amp;nbsp' : textArray[i];
                      string += '&lt;span&gt;' + character + '&lt;/span&gt;';
                  }
  
                  $(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});
                      }
                  });
  
              }
          });
      }
  </code></pre>
  
  <p>stuck in the algorithm of middle items's position.</p>