强制容器中的文本占据父元素的全宽

Question

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

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

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

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

如果太抽象的话，下面是我所说的一些镜头：

我想要什么：http://i.stack.imgur.com/YspIv.jpg

我得到的 text-align: justify: http://i.stack.imgur.com/AcIWf.jpg

我尝试了其他一些规则，例如 text-justify 和 letterpacing，但要么它没有改变任何东西，要么它不能采用动态值。

谢谢:)

Answer 1

我终于成功地创造了一个小提琴：

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; }更改颜色