You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

SwiftUI:带首尾引号的多行文本截断显示方案求助

SwiftUI 实现带首尾引号的3行截断文本

解决这个问题最靠谱的方法是用AttributedString把引号和主体文本整合到同一个Text视图里,既能单独控制各部分样式,又能让lineLimit正确作用于整体,保证闭合引号不会被截断,还不会出现多余空白。

实现代码

struct QuoteText: View {
    let content: String
    
    var body: some View {
        Text(attributedQuote)
            .lineLimit(3)
            .truncationMode(.tail)
    }
    
    private var attributedQuote: AttributedString {
        var attrString = AttributedString()
        
        // 配置开头引号样式
        var openingQuote = AttributedString(Image(systemName: "quote.opening"))
        openingQuote.font = .caption
        openingQuote.baselineOffset = 4
        attrString += openingQuote
        
        // 配置主体文本样式
        var mainText = AttributedString(content)
        mainText.font = .subheadline
        attrString += mainText
        
        // 配置结尾引号样式
        var closingQuote = AttributedString(Image(systemName: "quote.closing"))
        closingQuote.font = .caption
        closingQuote.baselineOffset = 4
        attrString += closingQuote
        
        return attrString
    }
}

// 使用示例
QuoteText(content: "这里是需要展示的长文本,当内容超过3行时,会自动在尾部截断,同时闭合引号会完整保留在截断后的内容末尾,不会被切掉。")

方案说明

  • 用AttributedString将开头引号、主体文本、结尾引号合并成一个完整的富文本内容,Text视图会将其作为整体处理,避免了多个Text拼接或HStack布局的问题。
  • 可以单独为引号和主体文本设置不同的字体、基线偏移等样式,满足原需求的视觉效果。
  • lineLimit(3)和truncationMode(.tail)直接作用于整个富文本,截断逻辑会自动保留结尾引号,不会出现引号被截断的情况。

内容的提问来源于stack exchange,提问作者Red Mak

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.13 10:12:39