Justify text with text-justify

Description

text-justify specifies how to justify the text.

The text-justify Property Values are listed as follows.

  • auto - The browser selects the justification.
  • none - No Justification.
  • inter-word - Spacing is distributed between words. This is suited to languages that use word separators, such as English.
  • inter-ideograph - Spacing is distributed between words and at inter-graphemic boundaries. suited for Japanese and Korean.
  • inter-cluster - Spacing is distributed between words and at grapheme cluster boundaries. suited for Thai.
  • distribute - Spacing is distributed between words and at grapheme cluster boundaries in all scripts except those that use connected or cursive styles.
  • kashida - Justification is applied by elongating characters (applies only to cursive scripts).

Example


<!DOCTYPE html>
<html>
<head>
<style>
p {<!-- w  ww .ja va2 s.  c  o m-->
   text-align:justify;
   text-justify:inter-word;
}
</style>
</head>

<body>
   <p>This is a test. This is a test. This is a test. This is a test. This is a test. 
   This is a test. This is a test. This is a test. This is a test. This is a test. 
   This is a test. This is a test. This is a test. This is a test. </p>
</body>

</html>

Click to view the demo





















Home »
  HTML CSS »
    CSS »




CSS Introduction
CSS Background
CSS Border
CSS Box Layout
CSS Text
CSS Font
CSS Form
CSS List
CSS Selectors
CSS Others
CSS Table