CODEWITHSUNDEEP
jqueryhtmlcsstextwidth
user3141833
user3141833

Reputation: 13

Force text in a container take full width of parent element

I'm currently trying to put up a little folio project for a college assignment, and I need it to be a minimum responsive. The problem is, I heavily rely on a title on each page that's composed of one or more word (but only ONE line), and is surrounded by 2 horizontal borders. Theses borders must be the same width of the main, big block of content on the page. The width of this block is in % of the page to keep it responsive. Thing is, I can't seem to make the title fill all the available width: I can make its block the width it should be, responsive and all, but no matter the size of the text block, the title inside doesn't take up all the available width.

I've obviously tried the classic text-align: justify, but it doesn't work because I only have one line of text (and sometimes just one word). I would like my title to "stretch", like in Photoshop when you have a big block of text and tell it to be fully-justified: even if there's only one word, the text fills up the block by increasing letterspacing or word-spacing.

I can't manage to reproduce this behavior with html/css.

Any idea? I'm open to JS/Jquery solutions but as I don't really master them I didn't explore this way that much.

Here are some shots of what I'm talking about if it's too abstract:

What I want: https://i.sstatic.net/YspIv.jpg

What I get with text-align: justify: https://i.sstatic.net/AcIWf.jpg

I've tried several other rules, like text-justify and letterspacing, but either it doesn't change anything or it can't take dynamic values.

Thanks :)

Upvotes: 1

Views: 1068

Answers (1)

Zword
Zword

Reputation: 6787

Finally i am successful in creating a fiddle:

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

Fullscreen: 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);
});

Note : Add the text with normal/black color to span with id="innerC" .Add the text with different color to span with id="colorize" and change color in .lastcolor{ color:red; }

Upvotes: 1

Related Questions