Swift - UIButton with two lines of text
Interview Questions practice on Codemia
Over 8,000 real interview questions from top companies, searchable by company and role.
Introduction
UIButton can show two lines of text, but it does not happen automatically just because the title contains a newline. You usually need to configure the button's title label for wrapping, center alignment, and enough layout space for the second line to appear.
The Basic Setup
The most direct approach is to set a title with a line break and then configure the internal label.
That handles the text itself, but the button still needs enough width and height to render two lines. If Auto Layout compresses the button too much, the second line may be truncated or never shown.
A Complete Programmatic Example
Here is a view controller that creates a working two-line button:
The width constraint matters because the button needs room to decide where wrapping occurs. Without predictable width, multi-line layout becomes unreliable.
Use Attributed Titles for Better Styling
If the two lines need different fonts, spacing, or emphasis, use an attributed string.
This gives you more control than a plain string while keeping the same layout ideas.
Interface Builder and Storyboards
If you are using Interface Builder, the same rules apply:
- set the button title with a line break
- allow multiple lines on the title label
- ensure the button has enough size in its constraints
The common mistake is to add the newline in Interface Builder and assume that is sufficient. The actual label behavior still controls whether the title wraps.
Watch the Layout, Not Just the Text
Two-line buttons are often really layout problems rather than text problems. If the text still appears on one line or gets truncated:
- the button may be too narrow
- the title label may still be single-line
- the content insets may be too small
- surrounding constraints may be compressing the button
When debugging, inspect the button frame and its title label in Xcode's view debugger. That usually makes the issue obvious.
Common Pitfalls
- Setting a newline in the title but forgetting
numberOfLines = 2. - Giving the button too little width or height for two lines to render.
- Assuming Interface Builder wraps the title automatically without label configuration.
- Forgetting centered text alignment, which often looks odd for multi-line button titles.
- Styling the title with an attributed string but not keeping the label multi-line.
Summary
- A two-line
UIButtonneeds both a line break in the title and a multi-line title label. - Set
numberOfLines,textAlignment, andlineBreakModeontitleLabel. - Auto Layout must give the button enough space to show two lines.
- Use an attributed title when the two lines need different styles.
- If the button still truncates, debug the layout constraints before assuming the text setup is wrong.
Related reading
- Swift - UIButton with two lines of text
- Swift - which types to use? NSString or String
- Swift - which types to use? NSString or String
- Swift 2.0 - Binary Operator cannot be applied to two UIUserNotificationType operands
- Swift 2.0 - Binary Operator cannot be applied to two UIUserNotificationType operands
- Swift 2 Call can throw, but it is not marked with ''try'' and the error is not handled
- Swift 2 Call can throw, but it is not marked with ''try'' and the error is not handled
- Swift 3.0 FileManager.fileExistsatPath always return false
.png&w=3840&q=75)
Tackling System Design Interview Problems
A short course that equips you with the skills to approach system design interviews methodically.
Start the free courseTrack what you have practised
A free account saves your progress, solutions and study plan across every problem on Codemia.
Interview Questions practice on Codemia
Over 8,000 real interview questions from top companies, searchable by company and role.