Applying styles to text alignment and hyphenation

Text alignment

To control the alignment of text within a container, you specify the text-align attribute. The text-align attribute supports the values outlined in following Table.

Value	Description
right	Aligns text to the right side of the parent container
left	Aligns text to the left side of the parent container
center	Aligns text to the horizontal center of the parent container
justify	Stretches text horizontally to fill the full width of the parent container

The following code sample demonstrates the use of the text-align attribute:

<head>
<style type="text/css">
    /* TEXT ALIGNMENT */
    #textLeft { text-align:left;    }
    #textRight{ text-align:right;   }
    #textCenter{ text-align:center;  }
    #textJustify{ text-align:justify;   }
</style>
</head>
<body>
    <h3>Text alignment</h3>
    <p id="textLeft">THIS TEXT IS ALIGNMENT LEFT</p>
    <p id="textRight">THIS TEXT IS ALIGNMENT RIGHT</p>
    <p id="textCenter">THIS TEXT IS ALIGNMENT CENTER</p>
    <p id="textJustify">THIS TEXT IS ALIGNMENT JUSTIFY</p>
</body>

Text indentation

Text indentation is configured using the text-indent attribute. The text-indent attribute accepts an integer value to indicate how much to indent.

The following code sample illustrates how to indent the text from the left border of the parent element:

<head>
<style type="text/css">
    /*TEXT INDENTATION*/
    #textIndent {   text-indent:70px;   }
</style>
</head>
<body>
    <h3>Text indentation</h3>
    <p id="textIndent"> THIS TEXT IS INDENTED 70px</p>
</body>

Text spacing

There are two ways to control the spacing of text:

using the letter-spacing attribute to define the space between letters
using the word-spacing attribute to define the space between words

The following CSS code demonstrates both examples:

<head>
<style type="text/css">
    /* TEXT SPACE - LETTER-SPACE & WORD-SPACE*/
    #letterSpace{   letter-spacing:10px;    }
    #wordSpace{  word-spacing:10px;  }
</style>
</head>
<body>
    <h3>Text spacing</h3>
    <p id="letterSpace">Letters are Spaced ( letter-spacing:10px;)</p>
    <p id="wordSpace">Words are spaced ( word-spacing:10px;)</p>
</body>

Text hyphenation

The text hyphenation allows you to control how a sentence or word wraps or breaks at the end of the line. The hyphen attribute can be specified to control this behavior.

The values available for the hyphen attribute are defined in the following Table:

Value	Description
none	Words will not break with a hyphen and the sentence will only break on whitespace.
Auto	Words will break based on a predefined algorithm.
Manual	Words will break based on specified hints in the words indicating an appropriate space for the break. This is done using the & shy; notation within the text.

The following code demonstrates using the none value:

<head>
<style type="text/css">
    /* TEXT HYBERNATION */
    #hybernationNone{
        border:1px solid green;
        width:150px;
        hyphens:none;
    }
</style>
</head>
<body>
    <h2>hyphens:none;</h2>
    <div id="hybernationNone">
        the browser is not hyphenating any of the text and is letting it overflow
        beyond the boundaries of the container. To force hyphenation,
    </div>
</body>

The browser is not hyphenating any of the text and is letting it overflow beyond the boundaries of the container.

To force hyphenation, specify auto for the value of the hyphen attribute as in the following code:

<head>
<style type="text/css">
    /* TEXT HYBERNATION */
    #hybernationAuto{
    border:1px solid green;
    width:150px;
    hyphens:auto;
    }
</style>
</head>
<body>
    <strong>hyphens:auto;</strong>
    <div id="hybernationAuto">
        the browser is not hyphenating any of the text and is letting it overflow
        beyond the boundaries of the container. To force hyphenation,
    </div>
</body>

Ads Right