The text-wrap property in CSS introduces powerful new capabilities for controlling how text flows within its container, significantly enhancing readability and typographic quality on the web. The balance value is designed to create a more harmonious and visually pleasing text block by ensuring that the lines of text have a similar length, which is particularly effective for headlines and short blocks of text. On the other hand, pretty focuses on preventing "orphans," which are single words left alone on the final line of a paragraph, a common typographic issue that can disrupt the reader's flow. By using these properties, developers can create more professional and aesthetically pleasing layouts with minimal effort.
Example 1: Basic text-wrap: balance for Headlines
/* styles.css */
h1 {
width: 80%; /* Set a width for the heading */
text-wrap: balance; /* Balances the text lines for better visual harmony */
font-family: 'Arial', sans-serif;
font-size: 2.5em;
text-align: center;
margin: 20px auto;
padding: 10px;
border: 2px solid #333;
}
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a Demonstration of a Balanced Headline</h1>
</body>
</html>
Explanation: This example demonstrates the fundamental use of text-wrap: balance on a heading element (<h1>). By applying this property, the browser automatically adjusts the line breaks within the headline to make each line roughly the same length, resulting in a more symmetrical and visually appealing block of text centered on the page.
Example 2: text-wrap: pretty to Prevent Orphans in Paragraphs
/* styles.css */
p {
width: 600px; /* Define a fixed width for the paragraph */
text-wrap: pretty; /* Prevents a single word from appearing on the last line */
font-family: 'Georgia', serif;
font-size: 1.1em;
line-height: 1.6;
margin: 20px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This paragraph is an excellent example of how the 'text-wrap: pretty' property works. Without it, the very last word of this text might end up all by itself on a new line, which is called an orphan. By applying this CSS rule, the browser will adjust the text to avoid this situation.</p>
</body>
</html>
Explanation: In this example, the text-wrap: pretty property is applied to a paragraph (<p>). This tells the browser to make small adjustments to the text layout to ensure that the last line of the paragraph does not end with a single, isolated word. This creates a cleaner and more professional-looking text block.
Example 3: Comparing text-wrap: balance and text-wrap: pretty
/* styles.css */
.balanced-heading {
width: 90%;
text-wrap: balance;
font-family: 'Verdana', sans-serif;
font-size: 2em;
border: 2px dashed #007bff;
padding: 15px;
margin-bottom: 20px;
}
.pretty-paragraph {
width: 550px;
text-wrap: pretty;
font-family: 'Times New Roman', Times, serif;
font-size: 1.2em;
border: 2px dashed #28a745;
padding: 15px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2 class="balanced-heading">A Balanced Heading for Improved Visual Flow</h2>
<p class="pretty-paragraph">This paragraph uses 'text-wrap: pretty' to avoid having a lone word on its final line. This is a subtle but important detail for good typography, and it makes the overall reading experience much smoother for everyone.</p>
</body>
</html>
Explanation: This code snippet directly compares the effects of text-wrap: balance and text-wrap: pretty. The heading with the .balanced-heading class will have its lines balanced for a more even appearance. The paragraph with the .pretty-paragraph class will specifically adjust to prevent an orphan word at the end.
Example 4: text-wrap in a Responsive Design Context
/* styles.css */
.responsive-heading {
width: 75%;
margin: 20px auto;
padding: 10px;
text-align: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 2.2em;
border: 2px solid #dc3545;
}
@media (max-width: 768px) {
.responsive-heading {
text-wrap: balance; /* Apply balance only on smaller screens */
font-size: 1.8em;
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2 class="responsive-heading">A Heading That Balances on Smaller Screen Sizes</h2>
</body>
</html>
Explanation: This example shows how to use text-wrap: balance within a media query. The .responsive-heading will only have its text balanced when the screen width is 768 pixels or less. This is a practical approach to apply more advanced text formatting only where it is most needed, such as on mobile devices where screen real estate is limited.
Example 5: Using text-wrap: pretty with Justified Text
/* styles.css */
.justified-text {
width: 700px;
text-align: justify; /* Justify the text */
text-wrap: pretty; /* Prevent orphans in justified text */
font-family: 'Garamond', serif;
font-size: 1.15em;
line-height: 1.7;
border: 1px solid #ccc;
padding: 20px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="justified-text">When text is justified, the spacing between words is adjusted to create a straight edge on both the left and right sides. Using 'text-wrap: pretty' here is especially helpful because it prevents an orphan word on the last line, which can look particularly awkward in a justified text block.</p>
</body>
</html>
Explanation: Here, text-wrap: pretty is combined with text-align: justify. Justified text can sometimes create awkward spacing, and an orphan word at the end can exacerbate this. By using text-wrap: pretty, we ensure the justified paragraph maintains a clean and professional appearance down to the last line.
Example 6: text-wrap: balance on a Blockquote
/* styles.css */
blockquote {
width: 50%;
margin: 30px auto;
padding: 20px;
background-color: #f8f9fa;
border-left: 5px solid #007bff;
font-style: italic;
font-size: 1.3em;
text-wrap: balance; /* Balance the lines of the quote */
}
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<blockquote>"The ability to balance text within a container is a significant step forward for web typography."</blockquote>
</body>
</html>
Explanation: This example applies text-wrap: balance to a <blockquote> element. Blockquotes often contain shorter, impactful text, making them ideal candidates for line balancing. The result is a more aesthetically pleasing and easily readable quote that stands out on the page.
Example 7: Fine-tuning with text-wrap: pretty and Other Properties
/* styles.css */
.fine-tuned-paragraph {
max-width: 650px;
margin: 20px;
padding: 15px;
font-family: 'Lato', sans-serif;
font-size: 1.2em;
line-height: 1.8;
letter-spacing: 0.5px; /* Add some letter spacing */
text-wrap: pretty; /* Ensure no orphans */
background-color: #e9ecef;
}
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="fine-tuned-paragraph">In this final example, 'text-wrap: pretty' is used alongside other typographic properties like 'line-height' and 'letter-spacing'. This demonstrates how 'text-wrap: pretty' can be part of a holistic approach to creating beautifully crafted and highly readable text on the web.</p>
</body>
</html>
Explanation: This final example for text-wrap shows how text-wrap: pretty can be combined with other CSS properties like line-height and letter-spacing to achieve a high level of typographic control. This holistic approach ensures that the text is not only free of orphans but also well-spaced and easy to read.