0

I have a fluid width website where I planned to place some text inside <div>. The idea is

<div>FIRST LINE TEXT HERE</div>
<div>THE SECOND LINE TEXT HERE. BUT QUITE LENGTHY</div>
<div>THIRD LINE IS HERE. NOT THAT MUCH LENGTH<div>

I need to display all the three lines to look like a justified LETTERS, by adding letter spacing dynamically based upon the content inside and available out <div> width.

Sarvap Praharanayuthan
  • 4,212
  • 7
  • 47
  • 72
  • This is duplicate, here's a solution: http://stackoverflow.com/questions/5530375/css-adjusting-spacing-between-letter-according-to-container-width – TheLexoPlexx Nov 29 '15 at 18:07

2 Answers2

1

You could compute the widths of the texts in JavaScript, then calculate the letter spacing needed, and add it. Note that this would treat word space like any other character, so the more spacing is added, the closer to each other would words appear to be. The results would be typographically questionable in other ways, too: words don’t look good if letters get too spaced.

If just a little spacing would be needed, it’s usually better to add word spacing, and you could do that for some browsers (not Chrome) with text-align-last: justify. You could consider using additionally text-justify: newspaper, as it may put part of the added spacing between letters, not just between words. See jsfiddle.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
0

I would suggest you to try this..give three different classes to the lines ie first_line, second_line and similarly third_line

Then write css for the classes. for first_line u keep the letter-spacing to wat u want. similarly u can give letter spacing for the other two lines as well.

Raman Kumar
  • 21
  • 1
  • This idea will work only for outer `
    ` with fixed width. The task is for a fluid layout. The width of the outer `
    ` is dynamic based on the screen resolution.
     – Sarvap Praharanayuthan Jan 16 '13 at 10:11