UILabel打字机效果宽度异常：单行显示失效如何修复？

问题场景 #

需要在屏幕左侧设置UILabel，通过Timer逐字符更新文本模拟打字机效果；要求Label宽度随文本长度自适应，文本过长时达到屏幕宽度后再换行。当前使用numberOfLines = 0和sizeToFit()实现，但出现单个字符提前换行的异常情况。

问题代码 #

private let taglinesLabel: UILabel = {
    let label = UILabel()
    label.textAlignment = .left
    label.textColor = .white
    label.backgroundColor = .black
    label.numberOfLines = 0
    return label
}()

override func layoutSubviews() {
    ...
    taglinesLabel.frame = CGRect(x: 0, y: 200, width: 0, height: 0)
    ...
}

public func showText() {
    ...
    startTimer()
    ...
}

func startTimer () {
    guard timer == nil else { return }

    timer =  Timer.scheduledTimer(
        timeInterval: TimeInterval(0.1),
        target      : self,
        selector    : #selector(onTimer),
        userInfo    : nil,
        repeats     : true)
}

@objc private func onTimer() {
    let tagline = taglines[taglineIndex]
    if(taglineCharacterIndex < tagline.count) {
        let substring = tagline.prefix(taglineCharacterIndex)
        print(substring)
        taglinesLabel.text = String(substring)
        taglinesLabel.sizeToFit()
        taglineCharacterIndex += 1
    } 
}

问题原因 #

sizeToFit()会让Label尽可能缩小到适配当前文本的最小尺寸，当逐字符添加时，Label宽度始终只适配当前单行文本的窄宽度。一旦新增字符导致单行宽度超过当前Label的窄宽度，就会触发换行，从而出现单个字符换行的问题。

解决方案 #

核心思路是给Label设置最大宽度限制（即屏幕可用宽度），让Label优先在该宽度内排版文本，只有当文本总宽度超过屏幕宽度时才自动换行。

方案1：使用Frame布局

1. 在layoutSubviews中初始化Label时，直接设置最大宽度为屏幕宽度：

override func layoutSubviews() {
    super.layoutSubviews()
    let maxWidth = UIScreen.main.bounds.width
    taglinesLabel.frame = CGRect(x: 0, y: 200, width: maxWidth, height: 0)
}

2. 修改onTimer方法，用sizeThatFits(_:)计算适配尺寸，限制最大宽度：

@objc private func onTimer() {
    let tagline = taglines[taglineIndex]
    guard taglineCharacterIndex < tagline.count else {
        timer?.invalidate()
        timer = nil
        return
    }
    // 修正索引，避免初始文本为空
    let substring = tagline.prefix(taglineCharacterIndex + 1)
    taglinesLabel.text = String(substring)
    
    let maxWidth = UIScreen.main.bounds.width
    // 计算在最大宽度约束下的合适尺寸
    let fittingSize = taglinesLabel.sizeThatFits(CGSize(width: maxWidth, height: CGFloat.greatestFiniteMagnitude))
    // 宽度取实际文本宽度和最大宽度的较小值，高度自动适配
    taglinesLabel.frame = CGRect(x: 0, y: 200, width: min(fittingSize.width, maxWidth), height: fittingSize.height)
    
    taglineCharacterIndex += 1
}

方案2：使用Auto Layout（更推荐）

1. 修改Label初始化，关闭自动转换约束：

private let taglinesLabel: UILabel = {
    let label = UILabel()
    label.textAlignment = .left
    label.textColor = .white
    label.backgroundColor = .black
    label.numberOfLines = 0
    label.translatesAutoresizingMaskIntoConstraints = false // 关闭自动约束转换
    return label
}()

2. 在viewDidLoad中添加约束，限制Label左侧对齐、顶部位置，且宽度不超过屏幕宽度：

override func viewDidLoad() {
    super.viewDidLoad()
    view.addSubview(taglinesLabel)
    
    NSLayoutConstraint.activate([
        taglinesLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        taglinesLabel.topAnchor.constraint(equalTo: view.topAnchor, constant: 200),
        taglinesLabel.widthAnchor.constraint(lessThanOrEqualTo: view.widthAnchor)
    ])
}

3. 修改onTimer方法，只需更新文本，系统会自动适配布局：

@objc private func onTimer() {
    let tagline = taglines[taglineIndex]
    guard taglineCharacterIndex < tagline.count else {
        timer?.invalidate()
        timer = nil
        return
    }
    let substring = tagline.prefix(taglineCharacterIndex + 1)
    taglinesLabel.text = String(substring)
    
    taglineCharacterIndex += 1
}

效果说明 #

两种方案都能确保Label宽度随文本长度扩展，但不会超过屏幕宽度；当文本总宽度达到屏幕宽度时，会自动换行，彻底解决单个字符提前换行的问题。

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