[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"article-text-wrap-balance-headline-orphans":32,"code:html:true:74jm0q":264,"code:css:true:kz76l2":265,"code:plain:true:1dkm2ff":266,"code:plain:true:18puxv":267,"code:css:true:1dh1w28":268,"code:css:true:1pg5gxj":269,"code:html:true:4qng3s":270,"code:css:true:vwuyso":271},[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,"title":35,"subtitle":36,"excerpt":37,"coverUrl":38,"locale":13,"readingMinutes":39,"publishedAt":40,"viewCount":41,"likeCount":19,"commentCount":19,"author":42,"vertical":47,"topic":48,"tags":51,"_count":63,"playground":65,"body":67,"bodyMd":246,"seo":247,"translationGroupId":251,"thread":252,"assessments":254,"translations":260,"quiz":262},"019fe660-9a9b-73dc-87cd-48744e21e671","text-wrap-balance-headline-orphans","You hand-edit headlines to avoid orphaned words. `text-wrap: balance` does it natively.",null,"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",55,{"id":43,"name":44,"username":45,"avatarUrl":36,"headline":46},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":49,"name":50},"css","CSS",[52,54,57,60],{"slug":49,"name":53,"color":36},"Css",{"slug":55,"name":56,"color":36},"webdev","Webdev",{"slug":58,"name":59,"color":36},"frontend","Frontend",{"slug":61,"name":62,"color":36},"javascript","Javascript",{"assessments":64},1,{"slug":34,"title":66},"text-wrap: balance & pretty — end headline orphans",{"blocks":68,"version":64},[69,73,79,82,85,88,93,96,100,103,108,111,115,118,121,124,127,130,133,136,140,143,147,150,154,157,160,163,166,169,172,175,178,181,185,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237],{"id":70,"html":71,"type":72},"b1","\u003Cp>Here is a small but persistent annoyance in frontend work:\u003C\u002Fp>","paragraph",{"id":74,"code":75,"type":76,"language":77,"highlight":78},"b2","\u003Ch1>The Practical Guide to Building Resilient\nWeb\u003C\u002Fh1>","code","html",[],{"id":80,"html":81,"type":72},"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":83,"html":84,"type":72},"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":86,"html":87,"type":72},"b5","\u003Cp>\u003Ccode>text-wrap: balance\u003C\u002Fcode> is the native solution.\u003C\u002Fp>",{"id":89,"html":90,"text":91,"type":92,"level":31},"b6","What \u003Ccode>text-wrap: balance\u003C\u002Fcode> does","What text-wrap: balance does","heading",{"id":94,"html":95,"type":72},"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":97,"code":98,"type":76,"language":49,"highlight":99},"b8","h1, h2, h3 {\n  text-wrap: balance;\n}",[],{"id":101,"html":102,"type":72},"b9","\u003Cp>Before, with the default greedy wrapping:\u003C\u002Fp>",{"id":104,"code":105,"type":76,"language":106,"highlight":107},"b10","The Practical Guide to Building Resilient\nWeb","plain",[],{"id":109,"html":110,"type":72},"b11","\u003Cp>After, with \u003Ccode>text-wrap: balance\u003C\u002Fcode>:\u003C\u002Fp>",{"id":112,"code":113,"type":76,"language":106,"highlight":114},"b12","The Practical Guide to\nBuilding Resilient Web",[],{"id":116,"html":117,"type":72},"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":119,"html":120,"type":72},"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":122,"html":123,"type":72},"b15","\u003C!-- playground:start -->",{"id":125,"html":126,"text":126,"type":92,"level":31},"b16","🎮 Try it yourself",{"id":128,"html":129,"type":72},"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":131,"html":132,"type":72},"b18","\u003Cp>\u003Cem>Runs right in your browser — poke at it and watch the concept react live.\u003C\u002Fem>\u003C\u002Fp>",{"id":134,"html":135,"type":72},"b19","\u003C!-- playground:end -->",{"id":137,"html":138,"text":139,"type":92,"level":31},"b20","\u003Ccode>text-wrap: pretty\u003C\u002Fcode> for body text","text-wrap: pretty for body text",{"id":141,"html":142,"type":72},"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":144,"code":145,"type":76,"language":49,"highlight":146},"b22","p, li, blockquote {\n  text-wrap: pretty;\n}",[],{"id":148,"html":149,"type":72},"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":151,"code":152,"type":76,"language":49,"highlight":153},"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":155,"html":156,"type":72},"b25","\u003Cp>This pair covers both problems with two rules and no JavaScript.\u003C\u002Fp>",{"id":158,"html":159,"text":159,"type":92,"level":31},"b26","Comparison with the old workarounds",{"id":161,"html":162,"type":72},"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":164,"html":165,"type":72},"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":167,"html":168,"type":72},"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":170,"html":171,"type":72},"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":173,"html":174,"type":72},"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":176,"html":177,"text":177,"type":92,"level":31},"b32","A real-world example",{"id":179,"html":180,"type":72},"b33","\u003Cp>A marketing page card with a headline and a description:\u003C\u002Fp>",{"id":182,"code":183,"type":76,"language":77,"highlight":184},"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":186,"code":187,"type":76,"language":49,"highlight":188},"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":190,"html":191,"type":72},"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":193,"html":194,"text":194,"type":92,"level":31},"b37","Browser support",{"id":196,"html":197,"type":72},"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":199,"html":200,"type":72},"b39","\u003Cp>\u003Ccode>text-wrap: pretty\u003C\u002Fcode> shipped slightly later: Chrome 117, Firefox 128, Safari 17.4.\u003C\u002Fp>",{"id":202,"html":203,"type":72},"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":205,"html":206,"type":72},"b41","\u003Cp>There is no polyfill needed and nothing to install.\u003C\u002Fp>",{"id":208,"html":209,"type":72},"b42","\u003C!-- quiz:start -->",{"id":211,"html":212,"text":212,"type":92,"level":31},"b43","🧠 Test yourself",{"id":214,"html":215,"type":72},"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":217,"html":218,"type":72},"b45","\u003Cp>\u003Cem>Instant feedback, a hint on every question, and an explanation for each answer — right or wrong.\u003C\u002Fem>\u003C\u002Fp>",{"id":220,"html":221,"type":72},"b46","\u003C!-- quiz:end -->",{"id":223,"html":224,"text":224,"type":92,"level":31},"b47","The takeaway",{"id":226,"html":227,"type":72},"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":229,"html":230,"type":72},"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":232,"type":233},"b50","divider",{"id":235,"html":236,"type":72},"b51","\u003Cp>\u003Cem>Thanks for reading! Let's stay connected:\u003C\u002Fem>\u003C\u002Fp>",{"id":238,"type":239,"items":240,"ordered":18},"b52","list",[241,242,243,244,245],"⭐ \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":248,"canonical":249,"description":250},"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":253,"locked":18},"019fe660-a16a-75ca-a10f-fb99ed044743",[255],{"id":256,"slug":34,"title":257,"_count":258},"019fe776-8aed-7068-ba13-596510ee5158","text-wrap: balance and pretty",{"questions":259},7,[261],{"locale":13,"slug":34},{"id":256,"slug":34,"title":257,"_count":263,"questionCount":259},{"questions":259},"\u003Cdiv class=\"shj shj-lang-html shj-multiline\" data-lang=\"html\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u003C\u002Fspan>\u003Cspan class=\"shj-var\">h1\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>The Practical Guide to Building Resilient\nWeb\u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-var\">h1\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">h\u003C\u002Fspan>\u003Cspan class=\"shj-num\">1\u003C\u002Fspan>, \u003Cspan class=\"shj-kwd\">h\u003C\u002Fspan>\u003Cspan class=\"shj-num\">2\u003C\u002Fspan>, \u003Cspan class=\"shj-kwd\">h\u003C\u002Fspan>\u003Cspan class=\"shj-num\">3\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">text-wrap\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">balance\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-plain shj-multiline\" data-lang=\"plain\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">The Practical Guide to Building Resilient\nWeb\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-plain shj-multiline\" data-lang=\"plain\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">The Practical Guide to\nBuilding Resilient Web\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">p\u003C\u002Fspan>, \u003Cspan class=\"shj-kwd\">li\u003C\u002Fspan>, \u003Cspan class=\"shj-kwd\">blockquote\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">text-wrap\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">pretty\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-cmnt\">\u002F* Recommended defaults *\u002F\u003C\u002Fspan>\n\u003Cspan class=\"shj-kwd\">h\u003C\u002Fspan>\u003Cspan class=\"shj-num\">1\u003C\u002Fspan>, \u003Cspan class=\"shj-kwd\">h\u003C\u002Fspan>\u003Cspan class=\"shj-num\">2\u003C\u002Fspan>, \u003Cspan class=\"shj-kwd\">h\u003C\u002Fspan>\u003Cspan class=\"shj-num\">3\u003C\u002Fspan>, \u003Cspan class=\"shj-kwd\">h\u003C\u002Fspan>\u003Cspan class=\"shj-num\">4\u003C\u002Fspan>, \u003Cspan class=\"shj-kwd\">h\u003C\u002Fspan>\u003Cspan class=\"shj-num\">5\u003C\u002Fspan>, \u003Cspan class=\"shj-kwd\">h\u003C\u002Fspan>\u003Cspan class=\"shj-num\">6\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">text-wrap\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">balance\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-kwd\">p\u003C\u002Fspan>, \u003Cspan class=\"shj-kwd\">li\u003C\u002Fspan>, \u003Cspan class=\"shj-kwd\">figcaption\u003C\u002Fspan>, \u003Cspan class=\"shj-kwd\">blockquote\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">text-wrap\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">pretty\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-html shj-multiline\" data-lang=\"html\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u003C\u002Fspan>\u003Cspan class=\"shj-var\">article\u003C\u002Fspan> \u003Cspan class=\"shj-class\">class\u003C\u002Fspan>\u003Cspan class=\"shj-str\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-str\">\"card\"\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u003C\u002Fspan>\u003Cspan class=\"shj-var\">h2\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>Automate Your Deployment Pipeline Without the Overhead\u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-var\">h2\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u003C\u002Fspan>\u003Cspan class=\"shj-var\">p\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\n    Learn how to wire up a zero-downtime deploy in an afternoon using\n    tools your team already has installed.\n  \u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-var\">p\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\n\u003Cspan class=\"shj-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-oper\"><\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-var\">article\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">>\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-var\">.card\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">h\u003C\u002Fspan>\u003Cspan class=\"shj-num\">2\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">text-wrap\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">balance\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-var\">font-size\u003C\u002Fspan>: \u003Cspan class=\"shj-func\">clamp\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">1.25\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>, \u003Cspan class=\"shj-num\">2.5\u003C\u002Fspan>vw, \u003Cspan class=\"shj-num\">1.75\u003C\u002Fspan>\u003Cspan class=\"shj-var\">rem\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-var\">.card\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">p\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">text-wrap\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">pretty\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>"]