Hi, I don't think this is possible without javascript, but here goes my question: Is there a way to make text stretch over a specified width? Say i have a div-container of 960px width and I want the contained h2 be 960px wide as well, how would i go about it?

Cheers

11 answers

Tilman 1
0
points
This was chosen as the best answer

Hi, thanks for all the answers so far. Yes, I think I will either try an image replacement, or aprroximate the font-size and center it, so it sooomewhat looks like the effect I am going to achieve.

Is there a way to replace with an image in a way, that people can still select the text? Can text have rgba color? So I would approximate the size of the h2, give it a background image with the proper sized text. And I would just set it to text-indent: -9999px for browsers, that don't support rgba.

Answered over 5 years ago by Tilman
Alex Holt 341
3
points

You're right. The best way would be javascript - but still not great...

Idea 1 (better): You can use CSS to make the h2 960px, but the text will not resize, only the space in the h2 tag - the font will not be stretched - if you want it to scan as if it were full width, you could make the H2 a block and give it a background, or underline so that it looks like a single box.. ie:

h2 { border-bottom: 1px solid #ccc; display: block; }
h2 { background: #efefef; display: block; }

Idea 2 (interesting - but stupid): You could wrap each letter in the heading in a span tag, then if you knew the number of letters in the heading, you could float each span tag and set it to the correct percentage width - but it will look horrible, and be super un-search engine friendly and un-accessible... but if you're interested, i threw up a demo that shows what i mean here.

Please note: i'm not condoning this method - i think it's a terrible idea :) - but it has some limited academic value :)

Answered over 5 years ago by Alex Holt
2
points

There is no good way og doing this that I can think of. One solution would be to increase the font size by 1px repeatedly using javascript and not stopping until the textnode had reached the appropriate width.

If it's vital to your design, use an image and replace the text with it using CSS.

Answered over 5 years ago by Mads Kjaer
Alex Holt 341
1
point

Nate: justifying text only works across multiple lines - the final line of a justified block is not justified... so it wont work real well for headings ;)

(i tried it ;) )

Answered over 5 years ago by Alex Holt
Alex Holt 341
1
point

Tilman: As far as i know, you wont be able to keep the text selectable if you move it out of the space.

Are the headings dynamic? or do you know what they are? if you already know what they are... then putting an image in the place of the heading as a background image is going to be easy enough, but as soon as you move the text itself around inside that space, you'll lose the selectability...

I don't know, but you could look into using something like SIFR for this? maybe you can work it out that way... not sure..

Answered over 5 years ago by Alex Holt
0
points

Modern browsers support rgba color spaces, so your suggested technique sounds great.

Answered over 5 years ago by Nate Kennedy
0
points

Another idea would be to use sIFR2. You can get more information at http://www.mikeindustries.com/blog/sifr/. You can check out the examples at that link to see the end results. Basically w/ sIFR2, when you set a width and height for your targeted element the Flash based text would re-size to fit that space. I do not believe sIFR3 has this ability anymore, so that is why I suggest sIFR2. It is easy to implement using the jQuery sIFR plug-in http://jquery.thewikies.com/sifr/. I believe this would do exactly what you are looking for.

Answered over 5 years ago by Efficient Pixel
Tilman 1
-1
points

Haha, yes you're right, example 2 is somewhat silly! But plus points for creativity!!

Thanks for the quick answer.

Answered over 5 years ago by Tilman
-2
points

You can justify the text in the specified area via CSS. It doesn't work quite as expected but it should work well enough.

Answered over 5 years ago by Nate Kennedy
-3
points

D'oh, I forgot about that part. You are quite right.

Answered over 5 years ago by Nate Kennedy
Good 0
-7
points

enter code here

Answered over 5 years ago by Good