UIButton with two lines of text in the title (numb

Question

I'm trying to make a UIButton that has two lines of text in its titleLabel. This is the code I'm using:

    UIButton *titleButton = [[UIButton alloc] initWithFrame:CGRectMake(15, 10, frame.size.width-100, 100)];
    titleButton.titleLabel.font = [UIFont boldSystemFontOfSize:24.0];
    [titleButton setTitle:@"This text is very long and should get truncated at the end of the second line" forState:UIControlStateNormal];
    titleButton.titleLabel.lineBreakMode = UILineBreakModeTailTruncation;
    titleButton.titleLabel.numberOfLines = 2;
    [self addSubview:titleButton];

When I try this, the text only appears on one line. It seems the only way to achieve more than one line of text in UIButton.titleLabel is to set numberOfLines=0 and use UILineBreakModeWordWrap. But this doesn't guarantee the text to be exactly two lines.

Using a plain UILabel, however, does work:

    UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(15, 10, frame.size.width-100, 100)];
    titleLabel.font = [UIFont boldSystemFontOfSize:24.0];
    titleLabel.text = @"This text is very long and should get truncated at the end of the second line";
    titleLabel.numberOfLines = 2;
    titleLabel.lineBreakMode = UILineBreakModeTailTruncation;
    [self addSubview:titleLabel];

Does anyone know how to make the UIButton work with two lines? Is the only solution to create a separate UILabel to hold the text, and add it as a subview of the button?

Answer 1

You can modify the needed value directly from Storyboard. Select the button, go to the identity inspector and add the following key-value pair in the "User defined runtime attributes" section:

Answer 2

 button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;

button.titleLabel.textAlignment = NSTextAlignmentCenter;

[button setTitle: @"Line1\nLine2" forState: UIControlStateNormal];

Answer 3

Updated answer for more recent iOS versions

Since this is the accepted answer, added @Sean's answer here:

Set these properties on the titleLabel of your button.

button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
button.titleLabel.numberOfLines = 2; // if you want unlimited number of lines put 0

Swift 3 and 4:

button.titleLabel?.lineBreakMode = .byWordWrapping
button.titleLabel?.numberOfLines = 2 // if you want unlimited number of lines put 0

---

Original answer for an older version of iOS

If you want 2 lines of text on top of your UIButton you should add a UIlabel on top of it that does precisely that.

UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(15, 10, frame.size.width-100, 100)];
titleLabel.font = [UIFont boldSystemFontOfSize:24.0];
titleLabel.text = @"This text is very long and should get truncated at the end of the second line";
titleLabel.numberOfLines = 2;
titleLabel.lineBreakMode = UILineBreakModeTailTruncation;
[myButton addSubview:titleLabel]; //add label to button instead.

---

Updated for interface builder solution

Added @Borut Tomazin's answer for a more complete answer. Updated this part again since the answer of @Borut Tomazin was improved.

You can do this much easier, with no code required. In Interface Builder set Line Break on UIButton to Word Wrap. Than you can insert multiple lines of title. Just hit Option + Return keys to make new line. You will also need to add this to the User Defined Runtime Attribute in Interface Builder:

titleLabel.textAlignment Number [1]

Answer 4

To avoid completely the need to edit code, and thus the need to subclass your view, in Xcode5 and greater you can follow Borut Tomazin suggestion:

In Interface Builder (or storyboard) set Line Break to Word Wrap. Than you can insert multiple lines of title. Just hit Option + Return keys to make new line.

and then, in the User Defined Runtime Attributes you can add

Key path: titleLabel.textAlignment
Type: Number
Value: 1

Note: this may be not completely "future proof" since we are translating the UITextAlignmentCenter constant into its numerical value (and that constant may change as new iOS versions are released), but it seems safe in the near future.

Answer 5

You can do this much easier, with no code required. In Interface Builder set Line Break on UIButton to Word Wrap. Than you can insert multiple lines of title. Just hit Option + Return keys to make new line. You will also need to add this to the User Defined Runtime Attribute in Interface Builder:

titleLabel.textAlignment Number [1]

It's that simple. Hope it helps...

Answer 6

You don't need to add a UILabel to the UIButton. That's just extra objects and work.

Set these properties on the titleLabel of your button.

button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
button.titleLabel.numberOfLines = 2;//if you want unlimited number of lines put 0

Swift:

button.titleLabel!.lineBreakMode = NSLineBreakMode.ByWordWrapping
button.titleLabel!.numberOfLines = 2//if you want unlimited number of lines put 0