How do you add multi-line text to a UIButton?

Question

I have the following code...

UILabel *buttonLabel = [[UILabel alloc] initWithFrame:targetButton.bounds];
buttonLabel.text = @"Long text string";
[targetButton addSubview:buttonLabel];
[targetButton bringSubviewToFront:buttonLabel];

...the idea being that I can have multi-line text for the button, but the text is always obscured by the backgroundImage of the UIButton. A logging call to show the subviews of the button shows that the UILabel has been added, but the text itself cannot be seen. Is this a bug in UIButton or am I doing something wrong?

Solution 1

For iOS 6 and above, use the following to allow multiple lines:

button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
// you probably want to center it
button.titleLabel.textAlignment = NSTextAlignmentCenter; // if you want to 
[button setTitle: @"Line1\nLine2" forState: UIControlStateNormal];

For iOS 5 and below use the following to allow multiple lines:

button.titleLabel.lineBreakMode = UILineBreakModeWordWrap;
// you probably want to center it
button.titleLabel.textAlignment = UITextAlignmentCenter;
[button setTitle: @"Line1\nLine2" forState: UIControlStateNormal];

2017, for iOS9 forward,

generally, just do these two things:

1. choose "Attributed Text"
2. on the "Line Break" popup select "Word Wrap"

Solution 2

The selected answer is correct but if you prefer to do this sort of thing in Interface Builder you can do this:

Solution 3

If you want to add a button with the title centered with multiple lines, set your Interface Builder's settings for the button:

[]

Solution 4

For IOS 6 :

button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
button.titleLabel.textAlignment = NSTextAlignmentCenter;

As

UILineBreakModeWordWrap and UITextAlignmentCenter

are deprecated in IOS 6 onwards..

Solution 5

To restate Roger Nolan's suggestion, but with explicit code, this is the general solution:

button.titleLabel?.numberOfLines = 0

View more solutions

Comments

[Owain Hunt]

I'm aware of the title property, but as far as I can tell it is impossible to set it to use more than one line, hence this approach. If I disable the backgroundImage, my UILabel show up, which to me suggests a bug in either bringSubviewToFront, or UIButton itself.

[Christopher Pickslay]

UIButton.lineBreakMode was deprecated in 3.0, so that's no longer a good option.

[Wienke]

lineBreakMode is deprecated only as a direct property of UIButton. We are directed to "Use the lineBreakMode property of the titleLabel instead." I edited Valerii's answer accordingly. It's still a good option.

[Aaron Brager]

Please note these assignments are deprecated in iOS 6. See the answer below by @NiKKi for the updated syntax.

[The dude]

Just so people know: this does not work if you're using NSAttributedString

[JakubKnejzlik]

Please, if you suggest this kind of ugly approach at least don't make mistakes in your code example :). The label shouldn't have the same center as button if it's a subview. Use myLabel.frame = button.bounds; or myLabel.center = cgPointMake(button.frame.size.with*0.5,button.frame.size.hei‌​ght*0.5)

[Becca Royal-Gordon]

@GrizzlyNetch I'm specifically advising not to add it as a subview of the button. addSubview: here adds it to button's superview, thus making it a sibling of the button, so matching their centers is correct.

[JakubKnejzlik]

Ah, my mistake! You are right, I've missed the "small" fact it's in the superview :D ... sorry :)

[RyJ]

Actually, just add button.titleLabel.numberOfLines = 0; That will make the lines unlimited. And button.titleLabel.textAlignment = NSTextAlignmentLeft; if you want left justified text as the title is centered by default.

[Robert]

In swift button.titleLabel?.lineBreakMode = NSLineBreakMode.ByWordWrapping

[Alex Cio]

Inside NSText.h in the Foundation there is no deprecated added. Its available from 6.0 but not deprecated.

[Alex Cio]

@jessecurry I don't see any difference to this snippet compared with the one from NiKKi..... and NSTextAlignmentCenter isn't deprecated like NiKKi tells.

[mjswensen]

Thanks @Robert for the swift solution. Can also use inference and omit the NSLineBreakMode, like so: button.titleLabel?.lineBreakMode = .ByWordWrapping.

[Rory McCrossan]

Can you add a textual description of how to achieve this. An image is great, but if it becomes unavailable your answer will be useless.

[user5440039]

@RoryMcCrossan Hi, i added an image above. Can you view it? Please note, Xcode 7 is still buggy so button title might disappear. However, once you run the app you will get the desired result.

[jcity]

In swift: button.titleLabel?.lineBreakMode = NSLineBreakMode.ByWordWrapping button.titleLabel?.textAlignment = NSTextAlignment.Center

[Avi Cohen]

As of Xcode 7.3, trying to center the text in IB doesn't work so you'll need to IBOutlet the button and in the viewDidLoad add: button.titleLabel.textAlignment = UITextAlignmentCenter;

[DrMickeyLauer]

Note that, if you want to use AutoLayout, UIButton has a bug that prevents the intrinsic content size to work properly with edge insets. To fix that, please refer to stackoverflow.com/questions/17800288/… where a good solution is presented.

[RainCast]

This is the best answer in this thread, actually. Works immediately and shows centered text from IB. Thanks!

[Fattie]

@user5440039 Thanks for the great answer. There's no need to add a textual description.

[Adam Waite]

Thanks to my 24 year old self for writing this answer, from 28 year old self.

[AnthoPak]

And to stay with the Interface Builder only setup, one should set titleLabel.textAlignment with Number value to 1 in User Defined Runtime Attributed to make the text centered

[Dani]

Thanks to your 28 year old self from my 24 year old self!

[tounaobun]

myButton.titleLabel.textAlignment = NSTextAlignmentCenter statement is also needed.

[XLE_22]

For your record, using a multi-line title label with an attributed string needs creating constraints to wrap perfectly this text inside the button: it's not as easy as a simple string.

[Pablo Blanco]

That it is not exactly what is asked, this solution would be a bad way to implement the question since the element button has a title.

[Becca Royal-Gordon]

This was reasonable advice in iPhone OS 2.0. There are much better ways to do it by now. :^)

[ShadeToD]

Works perfect in swift 5. I also added my function to center text in button. func centerTextInButton() { guard let titleLabel = titleLabel else { return } titleLabel.textAlignment = .center }

[Bill Chan]

I found adding constraint is not necessary, just set the text after lineBreakMode/textAlignment/numberOfLines are set. And also set titleEdgeInsets for top and bottom inset.

[Amir Khorsandi]

@BillChan unfortunately that doesn’t work in all cases

[androidguy]

As written, these constraints result in auto-layout conflict every time. Although I am not yet 100% sure of the importance of the use of inequality constraints, I do know that 2 of the constraints are written incorrectly: the bottom and right edges should use relatedBy: .lessThanOrEqual and flip the constant negative constant: -contentEdgeInsets.{bottom|right}

[user2330482]

Thank you - I had a ... in the last line due to an invisible character so I have added .lineBreakMode = .byClipping

[Mr. Disability]

Thanks to your 30-year-old self from my 27-year-old self!

[PhillipJacobs]

Lol, this solution is so perfect. Thank you!

[pableiros]

... and how do you implement multiline functionality using UIButtton.Configuration?