UIButton title alignment and multiline support

Question

How do I set the title of a UIButton to be left-aligned, and how can I show multiple lines of text in a UIButton?

Please update the tags or your question to tell us what technology this is about. — Gerrie Schenck, Jun 05 '09 at 07:20
Raju, you should really accept your answers... thats what makes the system work. — Codezy, May 24 '10 at 19:24
You should accept one of the answers below. The second one has diagrams! — Ziggy, Jul 19 '12 at 00:38
UILineBreakModeWordWrap working well but UIControlContentHorizontalAlignmentLeft is just like center-left not exactly center align like a UILabel — Amit Battan, Dec 01 '10 at 09:05
or [myButton.titleLabel setTextAlignment:UITextAlignmentCenter]; — Chris Rutkowski, Feb 27 '11 at 08:45

score 186 · Answer 1 · answered Aug 03 '09 at 22:52

186

Here's the code to do the UIButton alignment in code too: -

[myButton setContentHorizontalAlignment:UIControlContentHorizontalAlignmentLeft];

answered Aug 03 '09 at 22:52

Ian Kershaw

2,052
1
12
12

nevan king · Answer 2 · 2012-02-17T19:01:02.130

132

To set the alignment of a UIButton, look in the Attributes Inspector in Interface Builder for the button. There's a section called Alignment. Set it to left. Or right, or whatever you want.

enter image description here

To do it in code, use the contentHorizontalAlignment property of UIControl. You can set it to any of these properties:

UIControlContentHorizontalAlignmentCenter
UIControlContentHorizontalAlignmentLeft
UIControlContentHorizontalAlignmentRight
UIControlContentHorizontalAlignmentFill

[myButton setContentHorizontalAlignment:UIControlContentHorizontalAlignmentRight];

None of these options look particularly good (as you can see above), and you might have might have more luck using the contentEdgeInsets property of UIButton to reposition the content.

To set a multiline title on a UIButton, check this forum post which describes changing the button label.

Or you can use this code to quickly make a 2 line button:

myButton.titleLabel.textAlignment = UITextAlignmentCenter;
myButton.titleLabel.lineBreakMode = UILineBreakModeCharacterWrap;
[myButton setTitle:@"Siegfried\nRoy" forState:UIControlStateNormal];

enter image description here

Raju, don't forget to mark questions as accepted.

edited Feb 17 '12 at 19:01

answered Jun 05 '09 at 09:36

nevan king

112,709
45
203
241

11

you didn't get it enough to mark some of your questions answered ;-) – Rog Jun 05 '09 at 13:17
2

`numberOfLines` works on iOS5, but still need to set `lineBreakMode` for iOS 4. – ıɾuǝʞ May 30 '12 at 07:10
Note that when setting the title, it's important to use the message that specifies the UIControlState. If you just set it like a property, the label won't resize for the new text. See: http://stackoverflow.com/questions/4576331/uibutton-label-text-is-being-clipped – AndrewCr Nov 15 '12 at 06:29
@AndrewCr Just to be clear, I am using `setTitle:forState` in the example above. – nevan king Nov 15 '12 at 10:05
2

FYI: UITextAlignmentCenter is deprecated in iOS 6 and NSTextAlignmentCenter should now be used instead. – Chris Hall Oct 10 '13 at 14:31
In Swift `button.titleLabel?.textAlignment = .Left` worked for me. – dchakarov Oct 13 '16 at 23:47
TextAlignment `.leading` has been introduced since then. This might better fit your multiline text. I noticed similar issue with`.right` vs. `.trailing` textAlignments and found .trailing to be better. Also noticed .trailing worked with RTL languages too. – bubbaspike Feb 03 '22 at 22:50

score 8 · Answer 3 · edited Feb 26 '13 at 15:03

8

Actually, you can set the lineBreakMode to UILineBreakModeWordWrap or UILineBreakModeCharacterWrap. This breaks the text into multiple lines if necessary.

edited Feb 26 '13 at 15:03

David Snabel-Caunt

57,804
13
114
132

answered Sep 09 '10 at 12:24

Marc

233
4
6

score 6 · Answer 4 · answered Feb 17 '12 at 16:28

6

Try this

    myButton.titleLabel.textAlignment = UITextAlignmentLeft;
    myButton.titleLabel.lineBreakMode = UILineBreakModeCharacterWrap;
    myButton.titleLabel.numberOfLines = 0;

answered Feb 17 '12 at 16:28

rakeshNS

4,227
4
28
42

score 3 · Answer 5 · answered Aug 03 '12 at 08:06

3

To add a Paragraph effect you can change the size of title.

For alinea effect

answered Aug 03 '12 at 08:06

Anthone

2,156
21
26

UIButton title alignment and multiline support

5 Answers5