If I have a container which is 620px wide and I want the text in a h1 tag to span this width exactly, what is the easiest way to do this?

 

You can use text-align: justify; in a h1 tag (or p, li tag, etc.).

 

However, I've found that if you only have one line of text that isn't enough to reach the end of the line, it doesn't stretch. Similarly if you have a lot of text, all the lines except the last one justify.

 

Try word-spacing if you only have a little text

h1 { word-spacing: 30px; }

http://www.w3schools...ord-spacing.asp

Use em instead of px for the container of the h1 tag (or the h1 tag) and the word-spacing if you have a fluid width page.

 

Otherwise, with only a little text, you could adjust the letter spacing but it might look odd.

h1 { letter-spacing: 5px; }

 

Try both word-spacing and letter-spacing for an even spread (never tried it myself).

Edited October 17, 201213 yr by Wickham

Fittext http://fittextjs.com/

 

Job done.

Thanks for the responses guys. Much appreciated as always. I was also put onto a tool called the Big Text Wizard http://www.zachleat.com/bigtext/demo/. I managed to do what I wanted and in Firefox it works fine when resized … However, in Safari or Chrome the results differ at the two smallest breakpoints which I don't understand. I'm working from the Skeleton Grid so there is already a reset in there so I can't see were the problem would be. I have put up and example of what I mean @ http://jailbirds.co.uk/.

Edited October 20, 201213 yr by Craig Bibby