新栏目《999 个小技巧，让你 Vibe 的产品更有质感》
✨ 007 让你的文字排版更顺眼（以中英文为例）
不论是英文，还是中文，都需要解决对齐、长度不均，避头尾问题。你可以通过一些简单的 CSS 来进行处理——
更重要的是，在做 i18n 的时候，让 Agent 结合网页布局选择合适的文本。避免一个词居于两行，也避免过多的空隙。
001–007 都在主页，关注我，每天一个让产品更有质感的小技巧
Prompt 如下，可以直接抄 ⬇️
```
Polish the typography in my product with a set of CSS switches. Change
only how text wraps, spaces, aligns and truncates. No copy, font, colour
or layout changes beyond what each rule says.
## 0. Start from what exists
- Put the rules in the global text styles (base CSS, typography tokens,
Tailwind config or shared text components) so every page inherits them.
Add per-component rules only where a component overrides the base.
- Every rule below is progressive enhancement: browsers that don't know a
property ignore it. Add no polyfills.
- Scope the Chinese rules with :lang(zh) and make sure lang is set on
<html> or on the element, so English text keeps its own rules.
## 1. Headings break into even lines
- On h1-h3, card titles and hero lines:
text-wrap: balance;
- Lines come out about the same length, so a heading never ends on one
lonely word. Short text only: Chrome balances up to 6 lines.
## 2. No lone word at the end of a paragraph
- On paragraphs, descriptions and list items:
text-wrap: pretty;
- Also keep pairs that must not split together with a non-breaking space
( ): an em dash and the name after it, a number and its unit.
## 3. Numbers that change keep their width
- On anything that updates in place or sits in a column (counters,
prices, timers, stats, table cells):
font-variant-numeric: tabular-nums;
- The font must have tabular figures (the tnum feature); check that the
width actually stops changing. Leave running text proportional.
## 4. Button labels stay on one line
- On buttons and other labels in flex rows:
white-space: nowrap;
- (flex-shrink: 0 works too.) A crowded row must not squeeze a label onto
two lines.
## 5. Long text truncates instead of spilling out
- A flex item will not shrink below its content, so text inside it can't
truncate. On the flex item:
min-width: 0;
- And on the text itself:
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
- When the text really is cut (scrollWidth > clientWidth), show the full
text on hover in a tooltip.
## 6. Chinese body text: justified, on a whole number of characters
- On Chinese paragraphs only:
text-align: justify;
- Set the measure to a whole number of characters (for example
max-width: 26em at the paragraph's font size), so a justified line only
stretches to absorb Latin words and squeezed punctuation.
- Not for narrow columns (under about 15 characters), short text,
captions, buttons or mostly-English text: the gaps get uneven.
## 7. Space between Chinese and Latin text or numbers
- On Chinese text:
text-autospace: normal;
- The browser adds a thin gap between Han characters and Latin letters or
digits. Don't also hand-type spaces in copy or translation files.
Skip code, inputs and monospaced text.
## 8. No half-width gap before an opening bracket at a line start
- On Chinese UI text without a first-line indent:
text-spacing-trim: trim-start;
- An opening 「 “ （ at the start of a line drops its blank half and lines
up with the text above. Long-form text with a two-character indent
should use space-first instead. Chrome only for now.
## 9. Chinese headings break between words
- Chinese has no spaces, so a heading can split a word across lines.
Mark the break points between words with BudouX (its Simplified or
Traditional Chinese model) as <wbr>, at build time for static copy or at
render time for dynamic copy, then:
word-break: keep-all;
overflow-wrap: anywhere;
text-wrap: balance;
- Never use keep-all on Chinese without break points: the heading becomes
one unbreakable word. Don't use Intl.Segmenter for this (it splits common
words wrongly), and don't apply it to body text.
## 10. Line-start and line-end rules (避头尾)
- Browsers already keep punctuation off the start of a line and squeeze
line-end punctuation. Don't rebuild this.
- Find and remove line-break: anywhere used to stop overflow: it turns
these rules off. Use overflow-wrap: anywhere instead.
- Text drawn on canvas or SVG, or wrapped by hand in JS, gets none of
this: apply the rules there yourself.
## 11. When done
- List every file and selector you changed.
- List every line-break: anywhere and word-break: break-all you removed or
kept, and why.
- Show before and after on my own pages: a wrapped heading, a paragraph
ending, a changing number, a truncated label and a mixed
Chinese-English paragraph.
```
