CSS text-justify Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 24 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The text-justify property in CSS is used to specify the justification method for text when the text-align property is set to justify.

This property determines how the browser should distribute space between words and characters to align text evenly along both the left and right margins.

💡 Syntax

The syntax for the text-justify property is straightforward. It is applied to block-level elements containing text.

Syntax

Copied

element {
  text-justify: value;
}

Here, value can be one of the predefined keywords specifying the justification method.

🎛️ Default Value

The default value of the text-justify property is auto, which means the browser uses its default justification algorithm.

🏠 Property Values

Value	Description
auto	Uses the default justification method provided by the browser.
inter-word	Justifies text by adding space between words.
inter-character	Justifies text by adding space between characters. This value is commonly used for East Asian languages.

📄 Example

In this example, we'll demonstrate the different values of the text-justify property.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS text-justify Example</title>
  <style>
    .auto {
      text-align: justify;
      text-justify: auto;
    }
    .inter-word {
      text-align: justify;
      text-justify: inter-word;
    }
    .inter-character {
      text-align: justify;
      text-justify: inter-character;
    }
  </style>
</head>
<body>
  <h1>Text Justification Examples</h1>
  <h2>Auto</h2>
  <p class="auto">
    This is an example of text justification using the <code>auto</code> value. The browser will apply its default justification method.
  </p>
  <h2>Inter-Word</h2>
  <p class="inter-word">
    This is an example of text justification using the <code>inter-word</code> value. The text is justified by adding space between words.
  </p>
  <h2>Inter-Character</h2>
  <p class="inter-character">
    This is an example of text justification using the <code>inter-character</code> value. The text is justified by adding space between characters.
  </p>
</body>
</html>

🖥️ Browser Compatibility

The text-justify property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The text-justify property is a useful tool for web developers looking to control how text is justified within their web pages.

By specifying different justification methods, you can achieve precise control over text alignment, especially in multi-language and typographically complex documents. Experiment with the various values to see how they affect the layout and readability of your text.