UILabel splitting in the middle of words (or how to get proper word wrapping)

Question

I'm trying to fit some text into a fixed-width label (actually the width depends on the screen size, but cannot change within the app), and expect UIKit to cleverly use a combination of font resizing and word-wrapping to get the proper result. However, it doesn't seem to work that way. Considering a UILabel with the following constraints:

aspect ratio = 1:1
label.width = 0.7 * parentView.width (all other relevant constraints set, no errors or warnings in IB)

and the following code:

    label.font = label.font.withSize(100)
    label.adjustsFontSizeToFitWidth = true
    label.lineBreakMode = .byClipping
    label.numberOfLines = 0
    label.text = "Shooter team"

I would be hoping that it would resize the text and make it fit into two lines: "Shooter" and "team" (or, since the text could be anything, split it properly into words). However, when I set label.lineBreakMode to .byWordWrapping, it doesn't resize the text at all and so only one big letter is displayed (note: I'm using a big font size for it to resize because I can't know in advance how big the text is going to be, since the size depends on the screen size). Any other value for .lineBreakMode results in the text being resized but split into "Shoote" and "r team", which looks dumb. Changing autoshrink to e.g. Minimum font size = 8 doesn't seem to have any effect. See screenshot below.

Any suggestion of how I can get the proper splitting/resizing? I may have used the wrong terms for my searches but I haven't found any answer :-|

(Note: there will be a different question about how I can get the border of the encompassing view to be a nice circle prior to the view being displayed :-| )

Did you already tried to keep the lineBreakMode with .byWordWrapping and call layoutIfNeeded() after configure the label? — ios_dev, Jan 13 '19 at 16:37
Just did, no difference (still no text resizing when `byWordWrapping` is used). IMHO it would have been surprising that `layoutIfNeeded` makes a difference when I'm setting up my `UILabel` directly in the `viewDidLoad` method. — David, Jan 13 '19 at 16:40
Does this answer your question? [UILabel: wrap and/or break inside word(s) with hyphen(s)](https://stackoverflow.com/questions/18979545/uilabel-wrap-and-or-break-inside-words-with-hyphens) — Top-Master, Jul 02 '22 at 08:25

score 2 · Answer 1 · answered Jan 13 '19 at 17:28

First, to take advantage of adjustsFontSizeToFitWidth, you must also give it a scale factor (the smallest size you're willing to let the label shrink to). So if, for example, your label's font is sized at 30, you could let it shrink down to 24:

someLabel.font = UIFont(name: "someFont", size: 30)
someLabel.adjustsFontSizeToFitWidth = true
someLabel.minimumScaleFactor = (24/30)

Second, you may want to consider using an attributed title for your label to take advantage of paragraph styling. Paragraph styling lets you play with hyphenation rules:

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.hyphenationFactor = 1.0

let attributedTitle = NSAttributedString(string: "Shooter team", attributes: [NSAttributedString.Key.foregroundColor: UIColor.red, NSAttributedString.Key.paragraphStyle: paragraphStyle])

someLabel.attributedText = attributedTitle

This changes the behaviour, but doesn't yet achieve proper wrapping/resizing (I wanted to post an image of the results but I don't think I can do that in a comment). Setting `hyphenationFactor` to 1.0 results in the lines "Shoo-" and "ter tea" (the final 'm' has disappeared). `hyphenationFactor=0` gives "Shoot" and "er team" (the final 'm' is slightly out of the box). Also, this requires setting `lineBreakMode` to something other than `byWordWrapping`, **after** setting the `attributedString`. And btw the keys for paragraph styling are in class `NSAttributedStringKey` (no dot). — David, Jan 13 '19 at 18:51

David · Answer 2 · 2019-01-13T19:58:06.320

For lack of a better solution I've written the following function that empirically tries to find a font size that doesn't split a word in the middle. It's hackish but at least it works... Comments, suggestions or any better solution welcome!

func findFittingFont(for label: String) -> UIFont {
    // note: the 'split' function is a personal addition that splits a string on a regex
    // in this case, split between a non-word char and a word char
    let words = label.split(pattern: "(?<=\\W)(?=\\w)")
    var font = myLabel.font!
    // the width we don't want to overflow
    let maxWidth = myLabel.frame.width
    var fontSize = myLabel.frame.height
    var tooBig: Bool
    repeat {
        tooBig = false
        font = font.withSize(fontSize)
        // check for each word whether the rendered width is larger than the max width
        for word in words {
            // calculate the rendered width with the current font
            let width = (word as NSString).size(withAttributes: [.font: font]).width
            if width > maxWidth {
                tooBig = true
                // decrease the size by a factor
                fontSize *= 0.9
                break
            }
        }
        // go on as long as there's an overflowing word
    }
    while tooBig
    return font
}

UILabel splitting in the middle of words (or how to get proper word wrapping)

2 Answers2