人工智能AI Agent代码智能体Agent 编排CLIAI 应用【免费下载链接】gsd-2A powerful meta-prompting, context engineering and spec-driven development system that enables agents to work for long periods of time autonomously without losing track of the big picture项目地址https://gitcode.com/gh_mirrors/gs/gsd-2点击查看免费下载本文基于 GSDgsd-2仓库中 userinterface-wiki 技能 的排版规则 type-text-wrap-pretty.md 与配套规则 type-text-wrap-balance-headings.md 展开讲解如何用 CSS Text 模块新增的text-wrap: pretty与text-wrap: balance消除正文与标题中的孤行orphan、实现更均衡的行宽分布。读完本文你将掌握两条规则的选择依据、浏览器行数限制、Tailwind 对应工具类以及在本仓库 Web 界面中的实际应用方式。规则定位type-text-wrap-pretty 是什么在 GSD 仓库的 userinterface-wiki 技能 中规则被组织为 152 条、覆盖 12 大分类按 impactCRITICAL / HIGH / MEDIUM / LOW排序供 Agent 在审查或生成界面时引用。排版Typography是第 11 类统一使用type-前缀影响等级为MEDIUM其描述为CSS font 和 text 属性中最容易被开发者忽视的部分见 _sections.md。type-text-wrap-pretty就是排版类下的一条规则其 frontmatter 定义了元数据--- title: Use text-wrap pretty for Body Text impact: MEDIUM tags: type, text-wrap, orphans, pretty ---规则正文只有一句话却是排版细节中最常见也最容易被忽略的问题之一Usetext-wrap: prettyfor body text to reduce orphans. Usetext-wrap: balancefor headings.什么是孤行orphan为什么它会拉低界面质感孤行指一段文本换行后某一行只残留一两个词常出现在最后一行也常出现在标题折行后的末行。例如一个标题被渲染成Read our blog第二行只剩一个词blog视觉上孤零零地悬在那里既浪费纵向空间也让标题显得头重脚轻。正文段落末尾出现孤行时段与段之间的节奏会被打断整体观感类似没排好版。在 make-interfaces-feel-better 技能 的第 10 条核心原则Text Wrapping中给出了与本文规则完全一致的结论Usetext-wrap: balanceon headings. Usetext-wrap: prettyfor body text to avoid orphans.这意味着标题用balance均衡各行长度正文用pretty优化末行减少孤行——两条规则合起来才是一套完整的排版策略。text-wrap: pretty为正文而生的孤行消解方案CSS Text Level 4 引入了text-wrap属性pretty是其取值之一。它的行为是在换行时采用更慢但更讲究的算法专门优化最后一行的排版把原本可能残留一两个词的孤行收回前面的行或让最后一行分布更均匀。type-text-wrap-pretty.md 给出的标准写法是p { text-wrap: pretty; } h1, h2, h3 { text-wrap: balance; }配套的 typography.md 对两个取值做了关键区分这也是选择它们的最重要依据pretty的算法性能开销更大但不受行数上限限制适合较长的文本正文段落、描述文字——这正是它被推荐用于 body text 的原因balance的均衡算法计算成本高因此浏览器只允许它作用于短文本Chromium 限制为6 行以内Firefox 限制为10 行以内超出限制的balance会被浏览器静默忽略。所以对长正文段落使用text-wrap: balance属于无效意图见 typography.md 中的反例/* Bad — balance on long paragraphs (silently ignored, wastes intent) */正确的做法就是对正文使用pretty。text-wrap: balance让标题各行势均力敌配套规则 type-text-wrap-balance-headings.md 专门处理标题场景Usetext-wrap: balanceon headings to make lines roughly equal length instead of one long line and a short orphan.它给出的反例未均衡的标题与正例如下/* Incorrect — 默认折行出现一行长、一行孤词 */ h1 { /* default text-wrap */ } /* Correct — 各行长度大致相等 */ h1 { text-wrap: balance; }balance会让多行标题的每一行长度尽量接近而不是第一行几乎占满、第二行只剩一两个词。由于标题通常很短不超过浏览器限定的行数balance在这里既安全又划算。需要强调的是text-wrap: balance与text-wrap: pretty是互补关系而非替代关系标题用balance、正文用pretty二者搭配才能覆盖整个页面。选择速查表typography.md 给出的场景对照表可以直接作为决策依据场景取值标题、短文本≤ 6 行text-wrap: balance正文段落、描述文字text-wrap: pretty代码块、预格式化文本两者都不用保持默认代码块和pre场景的保持默认逻辑很直接这些内容的换行语义由代码本身决定任何自动换行优化都会破坏代码的对齐与可读性因此必须排除在规则之外。Tailwind 中的对应工具类如果你的项目使用 Tailwind CSS两条规则有现成的工具类可直接套用text-balance—— 等价于text-wrap: balance用于标题text-pretty—— 等价于text-wrap: pretty用于正文。在 typography.md 中balance一节明确标注了Tailwind: text-balance这也是本文所述规则在实际工程中最常见的使用形态。仓库实战印证真实界面中的落地方式GSD 仓库自身的前端web/目录就应用了这条排版规则。onboarding 的 step-mode.tsx 中How do you want to work? 这一标题使用了行内样式textWrap: balancemotion.h2 initial{{ opacity: 0, y: 12 }} animate{{ opacity: 1, y: 0 }} transition{{ duration: 0.4 }} classNametext-2xl font-bold tracking-tight text-foreground sm:text-3xl style{{ textWrap: balance } as React.CSSProperties} How do you want to work? /motion.h2这段代码验证了两件事text-wrap在 React 中可直接通过style的textWrap驼峰写法设置TypeScript 下需要as React.CSSProperties断言无需额外的 CSS 文件该标题属于短文本使用balance恰好落在浏览器支持的行数上限之内与规则文档的推荐完全吻合。在 Agent 审查流程中如何使用这些规则userinterface-wiki 的 SKILL.md 说明其应用场景包括Implementing or reviewing ... typography并约定输出 file:line 形式的发现。也就是说当 Agent 审查或生成前端代码时遇到长正文段落应检查是否缺失text-wrap: pretty遇到折行不均的标题应检查是否缺失text-wrap: balance。两条规则在 SKILL.md 的 Quick Reference 中分别登记为type-text-wrap-balance-headings- text-wrap: balance on headings for even linestype-text-wrap-pretty- text-wrap: pretty for body text to reduce orphans每条规则的元数据还包含impact: MEDIUM帮助 Agent 在优先级排序中决定是否值得修改。配套的 make-interfaces-feel-better 技能 则在 Review Checklist 中给出了可直接勾选的审查项Headings use text-wrap: balance。性能与兼容性小结把规则背后的工程考量归纳成三条实践准则不要对长正文使用balance超出浏览器行数上限后该属性会被静默忽略等于写了无效代码pretty是有代价的它使用更慢的算法换取更好的末行排版因此只应作用于真正需要精修排版的正文段落而不是页面里每一个p代码块保持默认pre/code的换行语义不能被自动排版破坏。text-wrap属于 CSS Text Level 4 规范目前 Chromium 与 Firefox 均提供支持这也是 typography.md 中 6 行 / 10 行两个上限数字的来源依据实际落地时建议结合目标浏览器的支持矩阵做降级判断——不支持text-wrap的浏览器会回退到默认换行行为页面不会因此破坏只是无法获得孤行优化的收益。延伸阅读规则原文type-text-wrap-pretty.md配套标题规则type-text-wrap-balance-headings.md完整排版参考含行数上限、Tailwind 工具类、场景对照表typography.md技能总览与分类优先级userinterface-wiki/SKILL.md界面质感技能第 10 条 Text Wrapping 原则make-interfaces-feel-better/SKILL.md仓库内真实应用step-mode.tsx赞分享人工智能AI Agent代码智能体Agent 编排CLIAI 应用【免费下载链接】gsd-2A powerful meta-prompting, context engineering and spec-driven development system that enables agents to work for long periods of time autonomously without losing track of the big picture项目地址https://gitcode.com/gh_mirrors/gs/gsd-2点击查看免费下载相关推荐gsd-2 前端排版规则解读用 CSS text-wrap: balance 让标题换行均匀、告别孤行gsd 2 前端排版规则解读用 CSS text wrap: balance 让标题换行均匀、告别孤行 本篇技术指南以 gsd 2 仓库内置的 UI/UX 技人工智能AI Agent代码智能体Agent 编排CLIAI 应用为什么选择Git-it5个理由让这个终端工具成为Git学习首选为什么选择Git it5个理由让这个终端工具成为Git学习首选 Git it是一款专为Git和GitHub学习设计的终端应用通过交互式挑战帮助用户掌握版本控文档/教程开发工具OpenCore Legacy Patcher 完整指南让老 Mac 安装并运行最新 macOSOpenCore Legacy Patcher 完整指南让老 Mac 安装并运行最新 macOS 苹果不给老 Mac 推送新系统就只能让它提前退休并非如此前端UI组件上一篇Kami 用 Marp 在 Markdown 里复刻纸感幻灯片slides-marp 主题、示例 Deck 与渲染全流程解读下一篇TCPDF与FPDF对比分析为什么选择TCPDF作为你的PDF解决方案终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考