[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"quiz-text-wrap-balance-headline-orphans":32,"quiz-article-text-wrap-balance-headline-orphans":48},[4,20],{"id":5,"slug":6,"name":7,"tagline":8,"description":9,"accentFrom":10,"accentTo":11,"icon":12,"defaultLocale":13,"locales":14,"features":16,"position":19},"019fe637-3d33-714b-b57f-23e163ffca0c","dev","Web Development","Build. Learn. Ship.","Practical courses, engineering-grade articles and open-source tools for people who ship.","violet-500","cyan-400","◇","en",[13,15],"fa",{"courses":17,"paths":17,"articles":17,"exams":18,"flashcards":18,"packages":17,"community":17,"certificates":17,"teams":17,"commerce":17},true,false,0,{"id":21,"slug":22,"name":23,"tagline":24,"description":25,"accentFrom":26,"accentTo":10,"icon":27,"defaultLocale":13,"locales":28,"features":30,"position":31},"019fe637-3dc2-754c-8657-0f175bfee7c6","lang","Languages","Learn a language the way you learn a codebase.","Structured paths, listening drills and spaced repetition that actually sticks.","amber-400","⌘",[13,15,29],"es",{"courses":17,"paths":17,"articles":18,"exams":18,"flashcards":18,"packages":18,"community":17,"certificates":18,"teams":18,"commerce":17},2,{"id":33,"slug":34,"kind":35,"title":36,"description":37,"config":38,"verticalId":5,"vertical":43,"course":40,"_count":44,"access":45,"attempts":47,"questionCount":39},"019fe776-8aed-7068-ba13-596510ee5158","text-wrap-balance-headline-orphans","PRACTICE_QUIZ","text-wrap: balance and pretty","The old fixes for an awkwardly-breaking headline — a manual \u003Cbr>, a soft hyphen, a max-width tweak, or a JavaScript rebalancer — all patched a symptom at one viewport width. text-wrap: balance and text-wrap: pretty solve line distribution natively, during layout, at every width.",{"questionCount":39,"timeLimitSec":40,"shuffleQuestions":18,"shuffleOptions":17,"negativeMarking":19,"passScorePct":41,"maxAttempts":40,"revealAnswers":42,"allowFlagging":18,"allowBacktracking":17},7,null,70,"IMMEDIATE",{"slug":6,"name":7},{"questions":39},{"allowed":17,"reason":46},"FREE",[],{"id":49,"slug":34,"title":50,"subtitle":40,"excerpt":51,"coverUrl":52,"locale":13,"readingMinutes":53,"publishedAt":54,"viewCount":55,"likeCount":19,"commentCount":19,"author":56,"vertical":61,"topic":62,"tags":65,"_count":77,"playground":79,"body":81,"bodyMd":260,"seo":261,"translationGroupId":265,"thread":266,"assessments":268,"translations":271,"quiz":273},"019fe660-9a9b-73dc-87cd-48744e21e671","You hand-edit headlines to avoid orphaned words. `text-wrap: balance` does it natively.","The classic fix for a headline that breaks awkwardly — a manual `\u003Cbr>`, a `­`, or a max-width tweak — exists because CSS had no way to distribute line breaks evenly. `text-wrap: balance` and `text-wrap: pretty` are the native answers.","\u002Fmedia\u002Fcovers\u002Ftext-wrap-balance-headline-orphans.png",4,"2026-07-28T08:41:41.989Z",56,{"id":57,"name":58,"username":59,"avatarUrl":40,"headline":60},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":64},"css","CSS",[66,68,71,74],{"slug":63,"name":67,"color":40},"Css",{"slug":69,"name":70,"color":40},"webdev","Webdev",{"slug":72,"name":73,"color":40},"frontend","Frontend",{"slug":75,"name":76,"color":40},"javascript","Javascript",{"assessments":78},1,{"slug":34,"title":80},"text-wrap: balance & pretty — end headline orphans",{"blocks":82,"version":78},[83,87,93,96,99,102,107,110,114,117,122,125,129,132,135,138,141,144,147,150,154,157,161,164,168,171,174,177,180,183,186,189,192,195,199,203,206,209,212,215,218,221,224,227,230,233,236,239,242,245,248,251],{"id":84,"html":85,"type":86},"b1","\u003Cp>Here is a small but persistent annoyance in frontend work:\u003C\u002Fp>","paragraph",{"id":88,"code":89,"type":90,"language":91,"highlight":92},"b2","\u003Ch1>The Practical Guide to Building Resilient\nWeb\u003C\u002Fh1>","code","html",[],{"id":94,"html":95,"type":86},"b3","\u003Cp>The browser broke the headline at "Web" because it ran out of space. Now you have one word sitting alone on the second line. You fix it by shortening a word, tweaking \u003Ccode>max-width\u003C\u002Fcode>, or inserting a \u003Ccode><br>\u003C\u002Fcode> that will be wrong at a different viewport width anyway.\u003C\u002Fp>",{"id":97,"html":98,"type":86},"b4","\u003Cp>This is not a rare edge case. It happens every time a heading is near the container edge, and every fix that works at one width breaks at another.\u003C\u002Fp>",{"id":100,"html":101,"type":86},"b5","\u003Cp>\u003Ccode>text-wrap: balance\u003C\u002Fcode> is the native solution.\u003C\u002Fp>",{"id":103,"html":104,"text":105,"type":106,"level":31},"b6","What \u003Ccode>text-wrap: balance\u003C\u002Fcode> does","What text-wrap: balance does","heading",{"id":108,"html":109,"type":86},"b7","\u003Cp>\u003Ccode>text-wrap: balance\u003C\u002Fcode> tells the browser to distribute the text as evenly as possible across all lines, rather than filling each line greedily until it overflows. The browser picks the break points; you don't guess.\u003C\u002Fp>",{"id":111,"code":112,"type":90,"language":63,"highlight":113},"b8","h1, h2, h3 {\n  text-wrap: balance;\n}",[],{"id":115,"html":116,"type":86},"b9","\u003Cp>Before, with the default greedy wrapping:\u003C\u002Fp>",{"id":118,"code":119,"type":90,"language":120,"highlight":121},"b10","The Practical Guide to Building Resilient\nWeb","plain",[],{"id":123,"html":124,"type":86},"b11","\u003Cp>After, with \u003Ccode>text-wrap: balance\u003C\u002Fcode>:\u003C\u002Fp>",{"id":126,"code":127,"type":90,"language":120,"highlight":128},"b12","The Practical Guide to\nBuilding Resilient Web",[],{"id":130,"html":131,"type":86},"b13","\u003Cp>Both lines are closer to equal in length. The orphan disappears. No \u003Ccode><br>\u003C\u002Fcode>, no \u003Ccode>max-width\u003C\u002Fcode> in \u003Ccode>ch\u003C\u002Fcode> units, no viewport-specific overrides.\u003C\u002Fp>",{"id":133,"html":134,"type":86},"b14","\u003Cp>The property is limited to short content — the browser caps the lookahead at around six lines. That is intentional: the algorithm is quadratic, and running it on a 500-word block would be expensive. Headlines and pull quotes are exactly the right target.\u003C\u002Fp>",{"id":136,"html":137,"type":86},"b15","\u003C!-- playground:start -->",{"id":139,"html":140,"text":140,"type":106,"level":31},"b16","🎮 Try it yourself",{"id":142,"html":143,"type":86},"b17","\u003Cp>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-07-28-text-wrap-balance-headline-orphans\u002Fplayground\u002F\">▶️ Open the interactive playground →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":145,"html":146,"type":86},"b18","\u003Cp>\u003Cem>Runs right in your browser — poke at it and watch the concept react live.\u003C\u002Fem>\u003C\u002Fp>",{"id":148,"html":149,"type":86},"b19","\u003C!-- playground:end -->",{"id":151,"html":152,"text":153,"type":106,"level":31},"b20","\u003Ccode>text-wrap: pretty\u003C\u002Fcode> for body text","text-wrap: pretty for body text",{"id":155,"html":156,"type":86},"b21","\u003Cp>Long-form paragraphs have their own orphan problem: a single word stranded at the start of the last line. \u003Ccode>text-wrap: balance\u003C\u002Fcode> is too aggressive for running text — balancing a 10-line paragraph would shift nearly every line. \u003Ccode>text-wrap: pretty\u003C\u002Fcode> is the calibrated version.\u003C\u002Fp>",{"id":158,"code":159,"type":90,"language":63,"highlight":160},"b22","p, li, blockquote {\n  text-wrap: pretty;\n}",[],{"id":162,"html":163,"type":86},"b23","\u003Cp>\u003Ccode>pretty\u003C\u002Fcode> uses a lookahead only on the last few lines of a block, pulling one word back if it would otherwise sit alone. The result looks identical to \u003Ccode>balance\u003C\u002Fcode> for the last line, but the rest of the paragraph is untouched.\u003C\u002Fp>",{"id":165,"code":166,"type":90,"language":63,"highlight":167},"b24","\u002F* Recommended defaults *\u002F\nh1, h2, h3, h4, h5, h6 {\n  text-wrap: balance;\n}\n\np, li, figcaption, blockquote {\n  text-wrap: pretty;\n}",[],{"id":169,"html":170,"type":86},"b25","\u003Cp>This pair covers both problems with two rules and no JavaScript.\u003C\u002Fp>",{"id":172,"html":173,"text":173,"type":106,"level":31},"b26","Comparison with the old workarounds",{"id":175,"html":176,"type":86},"b27","\u003Cp>\u003Cstrong>\u003Ccode><br>\u003C\u002Fcode> tags.\u003C\u002Fstrong> Work at one width. Wrong at every other width. Require you to re-edit content when the container changes.\u003C\u002Fp>",{"id":178,"html":179,"type":86},"b28","\u003Cp>\u003Cstrong>\u003Ccode>­\u003C\u002Fcode> soft hyphens.\u003C\u002Fstrong> Depend on hyphenation, which is language-sensitive and not always what you want for brand names or technical terms.\u003C\u002Fp>",{"id":181,"html":182,"type":86},"b29","\u003Cp>\u003Cstrong>\u003Ccode>max-width\u003C\u002Fcode> tweaks.\u003C\u002Fstrong> Force the heading into a narrower box to avoid the bad break. Move the break to a different width. Still wrong somewhere.\u003C\u002Fp>",{"id":184,"html":185,"type":86},"b30","\u003Cp>\u003Cstrong>JavaScript rebalancing (e.g. \u003Ccode>react-text-balancer\u003C\u002Fcode>).\u003C\u002Fstrong> Measures the element after render and inserts zero-width spaces or spans to approximate balance. Requires a ResizeObserver, adds DOM complexity, and causes a repaint.\u003C\u002Fp>",{"id":187,"html":188,"type":86},"b31","\u003Cp>\u003Ccode>text-wrap: balance\u003C\u002Fcode> does none of this. The browser solves the line-breaking problem during layout, before anything is painted. There is no DOM surgery, no observer, no flash of unbalanced content.\u003C\u002Fp>",{"id":190,"html":191,"text":191,"type":106,"level":31},"b32","A real-world example",{"id":193,"html":194,"type":86},"b33","\u003Cp>A marketing page card with a headline and a description:\u003C\u002Fp>",{"id":196,"code":197,"type":90,"language":91,"highlight":198},"b34","\u003Carticle class=\"card\">\n  \u003Ch2>Automate Your Deployment Pipeline Without the Overhead\u003C\u002Fh2>\n  \u003Cp>\n    Learn how to wire up a zero-downtime deploy in an afternoon using\n    tools your team already has installed.\n  \u003C\u002Fp>\n\u003C\u002Farticle>",[],{"id":200,"code":201,"type":90,"language":63,"highlight":202},"b35",".card h2 {\n  text-wrap: balance;\n  font-size: clamp(1.25rem, 2.5vw, 1.75rem);\n}\n\n.card p {\n  text-wrap: pretty;\n}",[],{"id":204,"html":205,"type":86},"b36","\u003Cp>The \u003Ccode>h2\u003C\u002Fcode> distributes across lines evenly regardless of the card's width — useful in a grid where card widths vary by column count. The \u003Ccode>p\u003C\u002Fcode> avoids a trailing orphan without disrupting the rhythm of the rest of the paragraph. Both properties do their jobs silently while the layout shifts.\u003C\u002Fp>",{"id":207,"html":208,"text":208,"type":106,"level":31},"b37","Browser support",{"id":210,"html":211,"type":86},"b38","\u003Cp>\u003Ccode>text-wrap: balance\u003C\u002Fcode> is \u003Cstrong>Baseline 2024\u003C\u002Fstrong>: Chrome 114 (June 2023), Firefox 121 (December 2023), Safari 17.4 (March 2024).\u003C\u002Fp>",{"id":213,"html":214,"type":86},"b39","\u003Cp>\u003Ccode>text-wrap: pretty\u003C\u002Fcode> shipped slightly later: Chrome 117, Firefox 128, Safari 17.4.\u003C\u002Fp>",{"id":216,"html":217,"type":86},"b40","\u003Cp>Both degrade gracefully — unsupported browsers use the default greedy wrapping. The text is still readable; it just may have an orphan. That is the correct fallback behavior for a visual refinement.\u003C\u002Fp>",{"id":219,"html":220,"type":86},"b41","\u003Cp>There is no polyfill needed and nothing to install.\u003C\u002Fp>",{"id":222,"html":223,"type":86},"b42","\u003C!-- quiz:start -->",{"id":225,"html":226,"text":226,"type":106,"level":31},"b43","🧠 Test yourself",{"id":228,"html":229,"type":86},"b44","\u003Cp>Think it clicked? \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-07-28-text-wrap-balance-headline-orphans\">Take the 7-question quiz →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":231,"html":232,"type":86},"b45","\u003Cp>\u003Cem>Instant feedback, a hint on every question, and an explanation for each answer — right or wrong.\u003C\u002Fem>\u003C\u002Fp>",{"id":234,"html":235,"type":86},"b46","\u003C!-- quiz:end -->",{"id":237,"html":238,"text":238,"type":106,"level":31},"b47","The takeaway",{"id":240,"html":241,"type":86},"b48","\u003Cp>Search your stylesheets for \u003Ccode><br>\u003C\u002Fcode> tags inside headings, or for \u003Ccode>max-width\u003C\u002Fcode> values expressed in \u003Ccode>ch\u003C\u002Fcode> units that exist specifically to force a nicer headline break. Each one is a layout constraint solving a problem CSS can now handle natively.\u003C\u002Fp>",{"id":243,"html":244,"type":86},"b49","\u003Cp>Add \u003Ccode>text-wrap: balance\u003C\u002Fcode> to your heading selectors and \u003Ccode>text-wrap: pretty\u003C\u002Fcode> to your body text selectors. The browser finds the right breaks at every viewport width, for every heading length, without any JavaScript or content edits on your part.\u003C\u002Fp>",{"id":246,"type":247},"b50","divider",{"id":249,"html":250,"type":86},"b51","\u003Cp>\u003Cem>Thanks for reading! Let's stay connected:\u003C\u002Fem>\u003C\u002Fp>",{"id":252,"type":253,"items":254,"ordered":18},"b52","list",[255,256,257,258,259],"⭐ \u003Cstrong>GitHub\u003C\u002Fstrong> — follow me and star the projects: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fparsajiravand\">github.com\u002Fparsajiravand\u003C\u002Fa>","💬 \u003Cstrong>Discord\u003C\u002Fstrong> — join the frontend best-practices community: \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ\">discord.gg\u002Fd9KRhuAwQ\u003C\u002Fa>","📸 \u003Cstrong>Instagram\u003C\u002Fstrong> — frontend best practices, daily: \u003Ca href=\"https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F\">@bestpractice___\u003C\u002Fa>","💼 \u003Cstrong>LinkedIn\u003C\u002Fstrong> — \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F\">linkedin.com\u002Fin\u002Fparsa-jiravand\u003C\u002Fa>","✉️ \u003Cstrong>Email\u003C\u002Fstrong> (work & contract inquiries): \u003Ca href=\"mailto:bestpractice2026@gmail.com\">bestpractice2026@gmail.com\u003C\u002Fa>","Here is a small but persistent annoyance in frontend work:\n\n```html\n\u003Ch1>The Practical Guide to Building Resilient\nWeb\u003C\u002Fh1>\n```\n\nThe browser broke the headline at \"Web\" because it ran out of space. Now you have one word sitting alone on the second line. You fix it by shortening a word, tweaking `max-width`, or inserting a `\u003Cbr>` that will be wrong at a different viewport width anyway.\n\nThis is not a rare edge case. It happens every time a heading is near the container edge, and every fix that works at one width breaks at another.\n\n`text-wrap: balance` is the native solution.\n\n## What `text-wrap: balance` does\n\n`text-wrap: balance` tells the browser to distribute the text as evenly as possible across all lines, rather than filling each line greedily until it overflows. The browser picks the break points; you don't guess.\n\n```css\nh1, h2, h3 {\n  text-wrap: balance;\n}\n```\n\nBefore, with the default greedy wrapping:\n\n```\nThe Practical Guide to Building Resilient\nWeb\n```\n\nAfter, with `text-wrap: balance`:\n\n```\nThe Practical Guide to\nBuilding Resilient Web\n```\n\nBoth lines are closer to equal in length. The orphan disappears. No `\u003Cbr>`, no `max-width` in `ch` units, no viewport-specific overrides.\n\nThe property is limited to short content — the browser caps the lookahead at around six lines. That is intentional: the algorithm is quadratic, and running it on a 500-word block would be expensive. Headlines and pull quotes are exactly the right target.\n\n\u003C!-- playground:start -->\n\n## 🎮 Try it yourself\n\n**[▶️ Open the interactive playground →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-07-28-text-wrap-balance-headline-orphans\u002Fplayground\u002F)**\n\n_Runs right in your browser — poke at it and watch the concept react live._\n\n\u003C!-- playground:end -->\n\n## `text-wrap: pretty` for body text\n\nLong-form paragraphs have their own orphan problem: a single word stranded at the start of the last line. `text-wrap: balance` is too aggressive for running text — balancing a 10-line paragraph would shift nearly every line. `text-wrap: pretty` is the calibrated version.\n\n```css\np, li, blockquote {\n  text-wrap: pretty;\n}\n```\n\n`pretty` uses a lookahead only on the last few lines of a block, pulling one word back if it would otherwise sit alone. The result looks identical to `balance` for the last line, but the rest of the paragraph is untouched.\n\n```css\n\u002F* Recommended defaults *\u002F\nh1, h2, h3, h4, h5, h6 {\n  text-wrap: balance;\n}\n\np, li, figcaption, blockquote {\n  text-wrap: pretty;\n}\n```\n\nThis pair covers both problems with two rules and no JavaScript.\n\n## Comparison with the old workarounds\n\n**`\u003Cbr>` tags.** Work at one width. Wrong at every other width. Require you to re-edit content when the container changes.\n\n**`­` soft hyphens.** Depend on hyphenation, which is language-sensitive and not always what you want for brand names or technical terms.\n\n**`max-width` tweaks.** Force the heading into a narrower box to avoid the bad break. Move the break to a different width. Still wrong somewhere.\n\n**JavaScript rebalancing (e.g. `react-text-balancer`).** Measures the element after render and inserts zero-width spaces or spans to approximate balance. Requires a ResizeObserver, adds DOM complexity, and causes a repaint.\n\n`text-wrap: balance` does none of this. The browser solves the line-breaking problem during layout, before anything is painted. There is no DOM surgery, no observer, no flash of unbalanced content.\n\n## A real-world example\n\nA marketing page card with a headline and a description:\n\n```html\n\u003Carticle class=\"card\">\n  \u003Ch2>Automate Your Deployment Pipeline Without the Overhead\u003C\u002Fh2>\n  \u003Cp>\n    Learn how to wire up a zero-downtime deploy in an afternoon using\n    tools your team already has installed.\n  \u003C\u002Fp>\n\u003C\u002Farticle>\n```\n\n```css\n.card h2 {\n  text-wrap: balance;\n  font-size: clamp(1.25rem, 2.5vw, 1.75rem);\n}\n\n.card p {\n  text-wrap: pretty;\n}\n```\n\nThe `h2` distributes across lines evenly regardless of the card's width — useful in a grid where card widths vary by column count. The `p` avoids a trailing orphan without disrupting the rhythm of the rest of the paragraph. Both properties do their jobs silently while the layout shifts.\n\n## Browser support\n\n`text-wrap: balance` is **Baseline 2024**: Chrome 114 (June 2023), Firefox 121 (December 2023), Safari 17.4 (March 2024).\n\n`text-wrap: pretty` shipped slightly later: Chrome 117, Firefox 128, Safari 17.4.\n\nBoth degrade gracefully — unsupported browsers use the default greedy wrapping. The text is still readable; it just may have an orphan. That is the correct fallback behavior for a visual refinement.\n\nThere is no polyfill needed and nothing to install.\n\n\u003C!-- quiz:start -->\n\n## 🧠 Test yourself\n\nThink it clicked? **[Take the 7-question quiz →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-07-28-text-wrap-balance-headline-orphans)**\n\n_Instant feedback, a hint on every question, and an explanation for each answer — right or wrong._\n\n\u003C!-- quiz:end -->\n\n## The takeaway\n\nSearch your stylesheets for `\u003Cbr>` tags inside headings, or for `max-width` values expressed in `ch` units that exist specifically to force a nicer headline break. Each one is a layout constraint solving a problem CSS can now handle natively.\n\nAdd `text-wrap: balance` to your heading selectors and `text-wrap: pretty` to your body text selectors. The browser finds the right breaks at every viewport width, for every heading length, without any JavaScript or content edits on your part.\n\n---\n\n*Thanks for reading! Let's stay connected:*\n\n- ⭐ **GitHub** — follow me and star the projects: [github.com\u002Fparsajiravand](https:\u002F\u002Fgithub.com\u002Fparsajiravand)\n- 💬 **Discord** — join the frontend best-practices community: [discord.gg\u002Fd9KRhuAwQ](https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ)\n- 📸 **Instagram** — frontend best practices, daily: [@bestpractice___](https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F)\n- 💼 **LinkedIn** — [linkedin.com\u002Fin\u002Fparsa-jiravand](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F)\n- ✉️ **Email** (work & contract inquiries): [bestpractice2026@gmail.com](mailto:bestpractice2026@gmail.com)",{"title":262,"canonical":263,"description":264},"You hand-edit headlines to avoid orphaned words. `text-wrap: balance` ","https:\u002F\u002Fbestpractic.org\u002Fblog\u002Ftext-wrap-balance-headline-orphans","The classic fix for a headline that breaks awkwardly — a manual `\u003Cbr>`, a `­`, or a max-width tweak — exists because CSS had no way to distribute line breaks evenly. `text-wrap","019fe660-9a9b-73dc-87cd-4c3ff9d7e8b0",{"id":267,"locked":18},"019fe660-a16a-75ca-a10f-fb99ed044743",[269],{"id":33,"slug":34,"title":36,"_count":270},{"questions":39},[272],{"locale":13,"slug":34},{"id":33,"slug":34,"title":36,"_count":274,"questionCount":39},{"questions":39}]