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和letterspacing，但要么它不会改变任何东西，要么它不能采用动态值。

谢谢：）

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; }中的颜色

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

1 个答案: