SwiftUI 中的 truncationMode 用于控制文本在空间不足时的截断方式（即如何显示省略号 …）。它通常与 lineLimit 结合使用，当文本内容超出可用空间时，决定截断的位置（头部、中部或尾部）。

核心使用场景 #

1. 空间受限的文本显示
   当文本容器（如 Text 视图）的宽度或高度不足以显示全部内容时，通过 truncationMode 明确截断位置，避免布局混乱。

2. 多行文本的优雅截断
   结合 lineLimit 限制行数后，控制截断位置以提升可读性（例如长段落截断在尾部）。

3. 特定设计需求
   某些场景需要特殊的截断方式（如文件路径显示中间截断、数字尾部截断等）。

truncationMode 的三种模式 #

1. .tail（默认）
   在文本尾部截断，显示为 ...。
   适用场景：标题、短描述等大多数通用情况。

   Text("This is a very long text that needs to be truncated.")
       .lineLimit(1)
       .truncationMode(.tail) // 显示 "This is a very long text tha..."
   

2. .middle
   在文本中部截断，保留开头和结尾部分。
   适用场景：文件路径、URL、长数字等需要保留两端关键信息的场景。

   Text("/User/Documents/Projects/SwiftUI/TruncationModeExample.swift")
       .lineLimit(1)
       .truncationMode(.middle) // 显示 "/User/Documents/Proj...cationModeExample.swift"
   

3. .head
   在文本头部截断，显示为 ...。
   适用场景：需要强调尾部内容（如时间戳、后缀标识等）。

   Text("2023-10-01_important_event_final_version")
       .lineLimit(1)
       .truncationMode(.head) // 显示 "...event_final_version"
   

结合 lineLimit 使用 #

• truncationMode 仅在文本实际被截断时生效，需通过 lineLimit 限制行数或通过容器约束宽度。
• 示例：限制文本最多显示 2 行，并在中部截断：

  Text("A long text that spans multiple lines and needs to be truncated in the middle.")
      .lineLimit(2)
      .truncationMode(.middle)
  

常见问题 #

• 为何截断不生效？
  确保父容器约束了宽度（如 frame(width:)）或设置了 lineLimit。

• 动态内容截断
  结合 fixedSize(horizontal:vertical:) 或布局容器（如 HStack）控制截断行为。

总结 #

truncationMode 是优化文本布局的关键工具，通过合理选择截断位置，可以在有限空间内平衡信息展示与可读性。