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