我的技术分享

Appearance

背景与目标 ​

在多语言应用中，昵称长度、字宽（拉丁字母 vs CJK vs 表情）、屏幕尺寸与 UI 容器的多样性都会让“固定 40 字符限制”的策略失效：有时过长撑爆布局，有时过短导致留白难看。目标是：不破坏布局、可读、可访问、对所有语言与表情符号稳定。

关键挑战 ​

  • 字符 ≠ 可视宽度：同样 10 个字符，“WWWiiii——”宽度差异巨大；CJK 单字更宽；emoji、更组合序列（ZWJ）更宽。
  • Grapheme（字素簇）：emoji 家庭、肤色变体、含音标的文字一个“可见字符”可能是多个 code point，简单 substr 会“截断半个表情”。
  • 换行规则差异：英语有空格可断行，CJK 常无空格；阿拉伯语/希伯来语 RTL 方向性。
  • 容器不确定：不同卡片/列表/表头列宽不同，固定“40 字符”不可移植。

总体策略（分层应对） ​

  1. 首选宽度约束而非“字符数” 用 CSS 控制单/双行展示、溢出省略，统一观感。
  2. 必要时才做 JS 截断 用 字素簇 安全截断 & 中间省略（保留前后关键部分），并随容器宽度自适应。
  3. 对 CJK 与 RTL 友好 恰当的 word-break / line-break / dir="auto"，避免“断在汉字中间/方向错乱”。
  4. 可访问性与完整可见 Hover/长按显示全名（Tooltip）、aria-label/title 提供无障碍读取。
  5. 避免布局抖动 列表/表格列使用 minmax(0, 1fr) 与 overflow: hidden，头像与操作区固定宽度。

方案一：纯 CSS（零 JS，覆盖 80% 场景） ​

适用于卡片标题、列表列等已知最大宽度的容器。

单行省略 ​

css
.name--one-line {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 使用单字符…，比三个点更紧凑 */
  direction: ltr; /* 避免长 RTL 文本影响周边布局；容器外再配合 dir="auto" */
}

多行省略（2 ～ 3 行） ​

css
.name--multi-line {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 改为 3 即三行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty; /* 更平衡的换行（新特性，兼容逐步提升） */
  line-break: auto; /* 兼容 CJK 的断行策略 */
}

CJK/英文混排与断词 ​

css
/* 表格/列表中常用：尽量不把英文单词截断，但允许超长 token 折行 */
.name--wrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word; /* 兼容旧浏览器的 fallback */
  overflow-wrap: anywhere; /* 允许在长连续串中断开（如很长的ID） */
  line-break: auto;
}

容器网格避免“把邻居挤飞” ​

css
.list-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto; /* 头像 | 名称 | 操作 */
  gap: 8px;
}
.name-cell {
  min-width: 0; /* 关键：允许中间列收缩，触发 ellipsis */
}

加分项（可选）

  • text-wrap: balance; 在大屏标题上让两行分布更匀称。
  • 列头/徽章区域设置固定宽度或 flex: 0 0 auto，防止被昵称挤压。

方案二：JS 增强（宽度驱动 & 字素安全） ​

当必须在中间省略（如“张三的超级超长昵称（官方认证）”保留“张三…认证”），或需要随容器宽度精细控制时使用。

1）用 Intl.Segmenter 做字素安全切分 ​

ts
// 上一行注释：用字素簇避免把 emoji/合成字母切断
const segmentGraphemes = (text: string) => {
  const seg = new Intl.Segmenter(undefined, { granularity: "grapheme" });
  return Array.from(seg.segment(text), (s) => s.segment);
};

2）按容器宽度自适应“中间省略” ​

ts
// 上一行注释：根据容器像素宽度与字体估算，决定前后保留的字素数
function middleEllipsisByWidth(
  text: string,
  container: HTMLElement,
  opts = { padding: 8, suffixReservePx: 0 }
) {
  const graphemes = segmentGraphemes(text);
  const ctx = document.createElement("canvas").getContext("2d")!;
  const style = getComputedStyle(container);
  ctx.font = `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;

  const max = container.clientWidth - (opts.padding ?? 0);
  const ellipsis = "…";
  const measure = (t: string) => ctx.measureText(t).width;

  if (measure(text) <= max) return text;

  let left = 0,
    right = graphemes.length;
  // 上一行注释：双指针向中间逼近，确保前后都可读
  while (left < right) {
    const head = graphemes.slice(0, Math.ceil(left / 2)).join("");
    const tail = graphemes
      .slice(graphemes.length - Math.ceil(left / 2))
      .join("");
    const candidate = `${head}${ellipsis}${tail}`;
    if (measure(candidate) <= max) return candidate;
    left++;
  }
  return ellipsis; // 极窄时仅显示 …
}

集成方式：用 ResizeObserver 在容器尺寸变化时重算；在虚拟列表或表格中只在可见时计算，避免性能开销。

3）保持方向正确 ​

  • 外层容器加上 dir="auto"（或根据语言 dir="rtl"/"ltr"）。
  • 文本节点本身可保持 unicode-bidi: plaintext; 避免嵌套方向串扰。

i18n 细节与坑位 ​

  • 不要用 toUpperCase() 强制大写：土耳其语等会改变字形宽度与语义。
  • CJK 中行内断开策略：line-break: auto/loose 往往比 keep-all 更实用（后者导致一整串不换行）。
  • 省略号用单字符 …（U+2026），比 ... 占宽更小、视觉更统一。
  • 存储限制用“字素簇数”而非字符数/字节数：后端校验配合前端一致。
  • Emoji & 变体选择器：仅 JS 截断能“安全处理”；CSS 省略在渲染层面不会“切半个表情”，但 JS 截断一定要字素级。
  • 双向文本：使用 dir="auto" + 避免在昵称中插入控制字符（如 LRM/RLM），防 UI 注入类问题。

交互与可访问性 ​

  • 完整显示的途径：Tooltip（hover/长按）、行展开、详情侧栏。
  • 辅助技术：同时设置 title 与 aria-label 为原文全名。
  • 移动端：长按或“i”按钮弹出完整昵称，避免只靠 hover。
  • 可复制：提供“复制姓名”图标按钮，避免用户从省略文本中难以选中。

工程落地清单（你可以逐条勾） ​

  1. 组件属性：mode: 'one-line' | 'multi-line' | 'middle-ellipsis'。
  2. 宽度优先：默认 CSS 省略；仅 middle-ellipsis 时启用 JS。
  3. Intl.Segmenter + ResizeObserver Polyfill/Fallback 策略。
  4. 表格/列表列：minmax(0,1fr) + min-width: 0。
  5. 无障碍：title/aria-label 全量文本；Tooltip。
  6. E2E/可视回归：覆盖 CJK、emoji、RTL、超长 token、极窄容器。
  7. 后端与存储：限制“字素簇数”一致化；避免 DB 层按字节截断。

参考实现片段（按需拷贝） ​

你说“只要需要调整的代码”，这里给可直接贴入的最小片段。

1）Tailwind 类（单/多行） ​

html
<!-- 上一行注释：单行省略 -->
<span
  class="block max-w-full truncate"
  title="{{fullName}}"
  aria-label="{{fullName}}"
>
  {{displayName}}
</span>

<!-- 上一行注释：两行省略（需兼容性可加 @supports 判断） -->
<span
  class="line-clamp-2 [text-wrap:pretty]"
  title="{{fullName}}"
  aria-label="{{fullName}}"
>
  {{displayName}}
</span>

2）中间省略指令/Hook（Vue / React 皆可迁移） ​

ts
// 上一行注释：在挂载和尺寸变化时根据容器宽度替换文本为中间省略
const useMiddleEllipsis = (el: HTMLElement, text: string) => {
  const ro = new ResizeObserver(() => {
    el.textContent = middleEllipsisByWidth(text, el);
  });
  ro.observe(el);
  // 上一行注释：卸载时清理监听
  return () => ro.disconnect();
};

结论 ​

  • 优先用 CSS 做“宽度驱动”的单/多行省略，通用、性能好。
  • 需要“中间省略/自适应精度”再启用 JS，并用 Intl.Segmenter 做字素安全。
  • i18n 友好：dir="auto"、合适的断行与省略号、无障碍与移动端补充交互。
  • 工程化：把“显示策略”当作可配置的组件属性，表格/列表使用网格与 min-width: 0 避免抖动。

如果你愿意，我可以按你的 UI 组件库（AntD/Element/TDesign/自研）给出适配版的最小修改片段。

本站总访问 — 次