新栏目《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.
```
Desal评论了这条帖子
👌 搓了一个简历编辑器
这是一款帮助你积累经历素材、针对不同岗位组装简历、保存多个投递版本的个人简历编辑器。同一条经历可以有不同侧重，你可以自己编写多种表达，再通过拖拽灵活组合，让简历更贴合目标岗位的要求。
1. 多版本保存：按岗位、公司保存不同简历，独立编辑、随时回看。
2. 一段经历，多种表达：自己编写不同侧重的要点，积累可复用素材。
3. 拖拽自由组装：挑选、组合和排序要点，让简历贴合目标岗位。
4. 独立修改：简历中的调整不影响原始素材和其他版本。
5. 排版与导出：自定义字体和布局，支持 PDF、Word 导出。
6. 本地保存：自动保存，支持备份与恢复。
👏欢迎大家试用，提出意见～
Desal评论了这条帖子
Bonnie 很好奇，大家都是怎么挑到一家值得加入的 AI 初创公司的呀 🤔
有没有已经加入心仪公司的小伙伴，来分享一下当时怎么选、最后被什么打动了？想给还在看机会的朋友们攒点真实经验～
目前收集到的答案 + 理由 👇
1. 产品有 taste，面试聊得有收获，薪资也超预期！
「最开始看了公司的报道，感觉产品的 taste 不错，就想接触看看。
面试的时候，感觉业务 +1 和 founder 都很聪明，聊业务也能得到一些有价值的反馈！不像之前面过的一些 AI 初创，好几次 HR 上来就问我什么是 context、什么是 agent、什么是 skill……
最后薪资也不错，超过预期了。」
2. 这条留给你们补充 (•̀ᴗ•́)و
欢迎来评论区接龙！
Desal评论了这条帖子
Vibe了一个拼贴诗日记本小工具
https://devfile.vip/preview/39jcsps0
可以把每天的关键词拼贴成一首诗歌日记，存到日记库中。考虑到可能不知道写什么，根据词性给出了一些提示词。
跨学科笑话一则
感觉自己家的猫头油有股受潮薯条味是正常的吗？
