Text-wrap Balance CSS Example

This CSS code example helps you to integrate text-wrap: balance property on your webpage. The text-wrap: balance property, applied to a specific paragraph class, dynamically balances text layout, offering a visually appealing design. The code incorporates Google Fonts for a modern aesthetic and employs media queries for responsiveness on smaller screens

How to Use Text-wrap Balance In CSS

1. First of all, ensure you include the following CDN links in the <head> section of your HTML file. This imports the ‘Oxygen Mono’ font, adding a touch of modernity to your text.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oxygen+Mono&display=swap" rel="stylesheet">

2. The main content should be enclosed within a <main> tag. Each section of text that you want to style differently should be wrapped in appropriate tags (e.g., <h1> for headers and <p> for paragraphs).

<main>
  <h1>normal</h1>
  <p>Why the Humble Spatula Is the Most Underrated Tool in Your Kitchen</p>
  
  <h1>text-wrap: balance</h1>
  <p class="bottom">Why the Humble Spatula Is the Most Underrated Tool in Your Kitchen</p>
</main>

3. Copy and paste the following CSS code into your stylesheet or within a <style> tag in the <head> section of your HTML. Moreover, this code helps create a visually appealing layout.

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0;
  color: #fff;
  background-image: linear-gradient(-20deg, #d6e6f4, #9cc4e4) !important;
  font: 1.5rem/1.333 'Oxygen Mono', monospace;
  overflow-x: hidden;
}

@media (max-width: 500px) {
  body {
    font-size: 1.125rem;
  }
}

main {
  position: relative;
  margin: 15px 10px;
}

main::after {
  content: '';
  display: block;
  position: absolute;
  top: 16px;
  left: calc(28ch + 9px);
  bottom: 0;
  border-left: 2px dashed #fff6;
}

 h1 {
  position: relative;
  z-index: 2;
  width: min-content;
  margin: 0 10px;
  padding: 5px 10px;
  border-radius: 4px;
  background-color: #000;
  font-weight: normal;
  font-size: 0.667em;
  white-space: nowrap;
  transform: translateY(50%);
}

p {
  width: 28ch;
  margin: 0 0 15px;
  padding: 20px 10px 10px;
  border-radius: 4px;
  background-color: #0006;
}

p.bottom {
  text-wrap: balance;
}

Feel free to tweak the styles according to your preferences. Moreover, adjust font sizes, colors, or spacing to match your website’s theme.

That’s all! hopefully, you have successfully integrated the CSS Text-wrap Balance example into your website/app project. If you have any questions or suggestions, feel free to comment below.

Similar Code Snippets:

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.

Code Snippet:	text-wrap: balance (basic)
Author:	Will Boyd
Published:	January 30, 2024
Last Updated:	February 3, 2024
Downloads:	141

License:	MIT
Edit Code online:	CodeHim

How to Use Text-wrap Balance In CSS

Similar Code Snippets:

Leave a Comment Cancel reply