SwiftUI设置富文本字体后工具栏文本省略号及对齐问题咨询

解决方案1：正确合并HTML属性与自定义字体 #

直接给AttributedString设置font属性会覆盖HTML转换生成的原有样式（比如颜色），同时可能导致Toolbar布局时错误计算文本宽度，触发省略号。正确的做法是通过NSMutableAttributedString合并字体属性，保留原有HTML样式：

修改onAppear中的文本处理逻辑：

.onAppear {
    let string = "<div><p><span style=\"color:#FF0000;\">Hello World</span></p></div>"
    guard let data = string.data(using: .utf8),
          let nsAttrStr = try? NSAttributedString(data: data, options: [
              .documentType: NSAttributedString.DocumentType.html,
              .characterEncoding: String.Encoding.utf8.rawValue
          ], documentAttributes: nil) else {
        return
    }
    
    // 转换为可变属性字符串，合并字体样式
    let mutableAttrStr = NSMutableAttributedString(attributedString: nsAttrStr)
    let fullRange = NSRange(location: 0, length: mutableAttrStr.length)
    // 设置目标字体，保留原有颜色等HTML属性
    let targetFont = UIFont.preferredFont(forTextStyle: .body).bold()
    mutableAttrStr.addAttribute(.font, value: targetFont, range: fullRange)
    
    // 转换回SwiftUI的AttributedString
    displayText = try? AttributedString(mutableAttrStr, including: \.uiKit)
}

此方法既保留了HTML中的颜色样式，又正确应用了自定义字体，Toolbar中的文本能正常计算宽度，不会出现省略号，且与其他按钮对齐正常。

解决方案2：调整Toolbar文本的布局约束与对齐 #

如果需要保留直接设置AttributedString.font的方式，可以通过fixedSize配合对齐指南解决省略号和对齐偏移问题：

修改Toolbar中的Text组件：

ToolbarItem(placement: .principal) {
    Text(displayText ?? "")
        .fixedSize(horizontal: true, vertical: false) // 允许文本横向完整展示，避免省略号
        .alignmentGuide(.toolbarPrincipal) { dimension in
            dimension[.center] // 强制与Toolbar内其他元素垂直居中对齐
        }
}

逻辑说明 #

• fixedSize(horizontal: true)禁用文本横向截断，确保内容完整显示；
• alignmentGuide(.toolbarPrincipal)手动指定垂直对齐基准，抵消fixedSize导致的文本垂直偏移，保证与"Done"按钮水平居中对齐。

内容的提问来源于stack exchange，提问作者tech_human