Results 1 to 5 of 5

Thread: Sentence / Word / Letter Spacing

Hybrid View

  1. #1
    Join Date
    Dec 2005

    Sentence / Word / Letter Spacing

    How do I make every sentence in a paragraph 100% width of the container div?

    I want for my paragraphs and other sentences to all be a fixed, squared off width.

    So that ...

    Hi, this is a sentence.

    is as wide as ...

    Hi, this is sentences is slightly longer.

    Further more, is there a way to cleanly balance the shift in word-spacing vs. letter spacing?

  2. #2
    Join Date
    Aug 2004
    text-align: justify;
    "Well done....Consciousness to sarcasm in five seconds!" ~ Terry Pratchett, Night Watch

    How to Ask Questions the Smart Way (not affiliated with this site, but well worth reading)

    My Blog
    cwrBlog: simple, no-database PHP blogging framework

  3. #3
    Join Date
    May 2005
    Gold Coast (MS)
    You also can control word and letter spacing if needed:

    p.spread { word-spacing: 0.5em; }

    <p class="spread">The spaces between words in this paragraph are increased by 0.5em.</p>

    p.spacious { letter-spacing: 0.25em; }

    Use with caution. Especially for other languages.


    <p class="spacious">The letters in this paragraph are spread out somewhat.</p>

    To set letter-spacing that's in proportion to font size, you must set it explicitly.


  4. #4
    Join Date
    Dec 2005
    American, living in Toronto, ON. CANADA
    don't forget:

    p {text-indent:value; line-height:value; margin:value}

    whereby text-indent is self-explainatory, "line-height" is the height between 'lines of sentence' in the paragraph, and "margin" is the distance between seperated paragraphs.

    line-height, probably best valued at "em" (1.1em, 1.2m, 1.3em, etc..)
    margin, most likely best at "px" (6px 0 6px 0, etc)

    A first-line pseudo :

    <style type="text/css">
    p:first-line {color: blue;font-variant: small-caps}

    makes the FIRST line of a multi-line paragraph,
    in this case, be the color "blue" or whatever you want.

    and first-letter pseudo :

    p:first-letter {color:red; font-size:xx-large}

    Makes the first letter, HUGE (and red, in this case)

    ...you can have a LOT of fun with these.
    I build for: Firefox and tweak for IE

  5. #5
    Join Date
    Dec 2005
    Cool! Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center