jquery - 强制容器中的文本占据父元素的整个宽度

Question

我目前正在尝试为大学作业制作一个小作品集元素，我需要它具有最低限度的响应性。问题是，我严重依赖每个页面上的标题，该标题由一个或多个单词(但只有一行)组成，并且被 2 个水平边框包围。这些边框必须与页面上主要的大块内容宽度相同。此 block 的宽度以页面的 % 为单位，以保持其响应性。问题是，我似乎无法让标题填满所有可用宽度:我可以使它的 block 达到应有的宽度，响应式等等，但无论文本 block 的大小如何，里面的标题都不会占用增加所有可用宽度。

我显然已经尝试过经典的 text-align: justify，但它不起作用，因为我只有一行文本(有时只有一个词)。我希望我的标题“拉伸(stretch)”，就像在 Photoshop 中，当你有一大块文本并告诉它完全对齐时:即使只有一个词，文本也会通过增加字母间距或字间距来填满该 block .

我无法使用 html/css 重现此行为。

有什么想法吗？我对 JS/Jquery 解决方案持开放态度，但由于我并没有真正掌握它们，所以我没有太多地探索这种方式。

下面是我正在谈论的一些截图，如果它太抽象的话:

我想要的:http://i.stack.imgur.com/YspIv.jpg

我用 text-align: justify: http://i.stack.imgur.com/AcIWf.jpg 得到了什么

我已经尝试了其他几个规则，例如文本对齐和字母间距，但它要么没有改变任何东西，要么不能采用动态值。

谢谢:)

Answer 1

最后我成功地创建了一个 fiddle :

http://jsfiddle.net/Zword/zkS8W/

全屏:http://jsfiddle.net/Zword/zkS8W/show/

JQuery/Javascript:

var h1=$('#innerC').html();
var h2=$('#colorize').html();

var l=h2.slice(-1);

var li=h2.lastIndexOf(l);
h2=h2.substring(0,li); 

h1=h1.replace(/[ ]+/g," ");
htemp1=h1.replace(/ /g,".");

h2=h2.replace(/[ ]+/g," ");
htemp2=h2.replace(/ /g,".");

$(document).ready(function(){
$('#innerC').html(htemp1);
$('#colorize').html(htemp2);
var childW=$('#child').width();
var innerCW=$('#innerC').width()+$('#colorize').width();
var s=1;
while(innerCW<childW)
{
    $('#innerC').css({'letter-spacing':''+s+'px'});
    $('#colorize').css({'letter-spacing':''+s+'px'});
    innerCW=$('#innerC').width()+$('#colorize').width();
    s++;
}
$('#innerC').html(h1);
$('#colorize').html(h2);    
$('#colorize2').html(l);
});

注意: 将普通/黑色文本添加到 span with id="innerC" 。将不同颜色的文本添加到 span with id= "colorize" 并在 .lastcolor{ color:red; 中改变颜色}