引用来源列表 · 各产品做法参考

八种在实际产品里出现过的排版。每种都用同一组数据渲染，方便直接比较。

说明：这些是按各产品公开可见的样式做的近似复刻，不是像素级还原 —— 字号、间距是我按视觉比例推的，产品实际值可能有几 px 差异。看结构和信息层级，别把数值当规范。

01

序号独立栏 · 内容组统一缩进

Wikipedia / 学术论文 / arXiv

最经典也最保守的一种。序号占一条窄栏、右对齐；标题和网址作为一个内容组统一悬挂缩进。序号在视觉上统辖整块 —— 这就是你要的层级关系。favicon 小一号（13px）贴在网址前面。

References

  1. 1.Frequent Miler: Current Amex Offers
    https://frequentmiler.com/current-amex-offers/
  2. 2.Frequent Miler: 20,000 Membership Rewards points after spending $1K with Air France / KLM
    https://frequentmiler.com/20000-membership-rewards-points-after-spending-1k-with-air-france-klm-targeted-enrollment-required/
  3. 3.维基百科：美国运通会员奖励计划
    https://zh.wikipedia.org/wiki/Membership_Rewards
02

域名在上 · 标题在下 · 带摘要

Perplexity Links 列表

信息顺序反过来：先 favicon + 域名（小字灰色）告诉你"这是谁说的"，再给标题。理由是判断可信度比读标题更优先。只显示域名，不显示完整 URL。分隔线代替间距做分组。

Sources

  1. 1 frequentmiler.com Current Amex Offers

    A running list of every targeted Amex Offer currently available, updated daily.
  2. 2 frequentmiler.com 20,000 Membership Rewards points after spending $1K with Air France / KLM

    Targeted enrollment required. Offer valid through the end of the quarter.
  3. 3 zh.wikipedia.org 美国运通会员奖励计划

    Membership Rewards 是美国运通于 1991 年推出的常客积分计划。
03

单行 · 序号 + favicon + 标题 + 域名

Microsoft Copilot / Bing 底部来源

一条来源就一行，标题超长直接省略号截断，绝不折行。域名右对齐做次要信息。最省纵向空间，代价是长标题读不全。这是"折行破坏排版"这个问题的一种彻底解法。

了解详细信息

  1. 1Frequent Miler: Current Amex Offersfrequentmiler.com
  2. 2Frequent Miler: 20,000 Membership Rewards points after spending $1K with Air France / KLMfrequentmiler.com
  3. 3维基百科：美国运通会员奖励计划zh.wikipedia.org
04

无序号 · 圆形 favicon + 域名 + 标题两行截断

ChatGPT Search 侧栏

干脆不显示序号 —— 正文里的内联标记只用域名 chip，所以列表也不需要编号来对应。favicon 做成圆形，标题限两行。整行做 hover 高亮，点击区域是整块而不只是文字。

引用

05

卡片网格 · 序号在角上

Google AI Overview / Perplexity 顶部 strip

横向排布，序号缩到卡片右上角当角标。标题在上、来源在下，和列表式相反。适合放在答案上方做"来源预览"，一屏能塞 6–8 个；不适合作为完整来源清单。

  1. 1Current Amex Offersfrequentmiler.com
  2. 220,000 MR points with Air France / KLMfrequentmiler.com
  3. 3$100 back at Carnival with Amex Offerfrequentmiler.com
  4. 4美国运通会员奖励计划zh.wikipedia.org
06

面包屑网址 · favicon 套在圆环里

Google 搜索结果 / Kagi

favicon 放进一个 26px 圆环，右侧站名 + 面包屑路径两行小字，标题在下方用链接色。URL 被改写成 域名 › 路径 › 路径 的面包屑，既保留了路径信息又不会出现长串折行。这是搜索引擎解决"URL 太长"的标准答案。

  1. 1 Frequent Miler
    https://frequentmiler.com › current-amex-offers     Current Amex Offers
  2. 2 Frequent Miler
    https://frequentmiler.com › 20000-membership-rewards-points…     20,000 Membership Rewards points after spending $1K with Air France / KLM
07

圆形序号 · 标题在上 · favicon + 域名在下

NotebookLM / Kagi Assistant 风格

和你现在的方向最接近的一种：序号独立栏（做成圆形描边），标题在上、favicon + 域名在下。区别是第二行放域名而不是完整 URL，所以永远只有一行、永远不折行。

来源

  1. 1Frequent Miler: Current Amex Offersfrequentmiler.com
  2. 2Frequent Miler: 20,000 Membership Rewards points after spending $1K with Air France / KLMfrequentmiler.com
  3. 12维基百科：美国运通会员奖励计划zh.wikipedia.org
08

完整 URL 但单行截断

折中方案

如果必须显示完整 URL（比如用户要复制、要看具体路径），就让它单行 text-overflow:ellipsis 截断 —— 保留完整链接的语义，但排版永远不会被长 URL 撑坏。鼠标悬停给 title 看全文。

References

  1. 1Frequent Miler: Current Amex Offershttps://frequentmiler.com/current-amex-offers/
  2. 2Frequent Miler: 20,000 Membership Rewards points after spending $1K with Air France / KLMhttps://frequentmiler.com/20000-membership-rewards-points-after-spending-1k-with-air-france-klm-targeted-enrollment-required/
  3. 12维基百科：美国运通会员奖励计划https://zh.wikipedia.org/wiki/Membership_Rewards

横向对比

#序号favicon 位置第二行内容长内容处理
01独立左栏网址行内完整 URL折行
02独立左栏方块域名前，在标题上方—（域名在上）标题折行 + 摘要
03行内标题前无（单行）省略号截断
04无域名前，在标题上方—标题限 2 行
05卡片右上角标域名前，在标题下方域名标题限 2 行
06独立左栏圆环内，标题上方面包屑路径路径省略号
07独立左栏圆形域名前，标题下方域名标题折行
08独立左栏URL 前，标题下方完整 URLURL 省略号截断

最值得注意的一点：八种里只有 01 和 08 显示完整 URL，其余全部只显示域名或面包屑路径。产品普遍不展示完整 URL —— 因为长 URL 必然折行，而折行会破坏列表的行高节奏和左边界，正好是你一路在调的那个问题。

序号的层级：凡是要表达"序号统辖整块"的（01 / 02 / 06 / 07 / 08），序号都独占左栏，不和标题挤在同一行。行内序号只出现在单行布局里（03），因为那时候序号和标题本来就是同一层。

favicon 的归属：它跟着"来源标识"走。放域名前面（02 / 04 / 05 / 06 / 07）是主流，因为 favicon + 域名共同回答"谁说的"；放完整 URL 前面（01 / 08）也成立，但 favicon 尺寸要跟着降到 13–14px 去配小字号。