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
相关产品推荐
相关产品推荐

