Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS text-justify Property

Posted in CSS Tutorial
Updated on Jul 18, 2024
By Mari Selvan
👁️ 16 - Views
⏳ 4 mins
💬 1 Comment
CSS text-justify Property

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
Copy To Clipboard
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

ValueDescription
autoUses the default justification method provided by the browser.
inter-wordJustifies text by adding space between words.
inter-characterJustifies 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
Copy To Clipboard
<!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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy