Categories
cocoa-touch ios text-alignment uikit uilabel

Vertically align text to top within a UILabel

2304

I have a UILabel with space for two lines of text. Sometimes, when the text is too short, this text is displayed in the vertical center of the label.

How do I vertically align the text to always be at the top of the UILabel?

image representing a UILabel with vertically-centered text

1

2758

There’s no way to set the vertical-align on a UILabel, but you can get the same effect by changing the label’s frame. I’ve made my labels orange so you can see clearly what’s happening.

Here’s the quick and easy way to do this:

    [myLabel sizeToFit];

sizeToFit to squeeze a label


If you have a label with longer text that will make more than one line, set numberOfLines to 0 (zero here means an unlimited number of lines).

    myLabel.numberOfLines = 0;
    [myLabel sizeToFit];

Longer label text with sizeToFit


Longer Version

I’ll make my label in code so that you can see what’s going on. You can set up most of this in Interface Builder too. My setup is a View-Based App with a background image I made in Photoshop to show margins (20 points). The label is an attractive orange color so you can see what’s going on with the dimensions.

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 20 point top and left margin. Sized to leave 20 pt at right.
    CGRect labelFrame = CGRectMake(20, 20, 280, 150);
    UILabel *myLabel = [[UILabel alloc] initWithFrame:labelFrame];
    [myLabel setBackgroundColor:[UIColor orangeColor]];

    NSString *labelText = @"I am the very model of a modern Major-General, I've information vegetable, animal, and mineral";
    [myLabel setText:labelText];

    // Tell the label to use an unlimited number of lines
    [myLabel setNumberOfLines:0];
    [myLabel sizeToFit];

    [self.view addSubview:myLabel];
}

Some limitations of using sizeToFit come into play with center- or right-aligned text. Here’s what happens:

    // myLabel.textAlignment = NSTextAlignmentRight;
    myLabel.textAlignment = NSTextAlignmentCenter;

    [myLabel setNumberOfLines:0];
    [myLabel sizeToFit];

enter image description here

The label is still sized with a fixed top-left corner. You can save the original label’s width in a variable and set it after sizeToFit, or give it a fixed width to counter these problems:

    myLabel.textAlignment = NSTextAlignmentCenter;

    [myLabel setNumberOfLines:0];
    [myLabel sizeToFit];

    CGRect myFrame = myLabel.frame;
    // Resize the frame's width to 280 (320 - margins)
    // width could also be myOriginalLabelFrame.size.width
    myFrame = CGRectMake(myFrame.origin.x, myFrame.origin.y, 280, myFrame.size.height);
    myLabel.frame = myFrame;

label alignment


Note that sizeToFit will respect your initial label’s minimum width. If you start with a label 100 wide and call sizeToFit on it, it will give you back a (possibly very tall) label with 100 (or a little less) width. You might want to set your label to the minimum width you want before resizing.

Correct label alignment by resizing the frame width

Some other things to note:

Whether lineBreakMode is respected depends on how it’s set. NSLineBreakByTruncatingTail (the default) is ignored after sizeToFit, as are the other two truncation modes (head and middle). NSLineBreakByClipping is also ignored. NSLineBreakByCharWrapping works as usual. The frame width is still narrowed to fit to the rightmost letter.


Mark Amery gave a fix for NIBs and Storyboards using Auto Layout in the comments:

If your label is included in a nib or storyboard as a subview of the view of a ViewController that uses autolayout, then putting your sizeToFit call into viewDidLoad won’t work, because autolayout sizes and positions the subviews after viewDidLoad is called and will immediately undo the effects of your sizeToFit call. However, calling sizeToFit from within viewDidLayoutSubviews will work.


My Original Answer (for posterity/reference):

This uses the NSString method sizeWithFont:constrainedToSize:lineBreakMode: to calculate the frame height needed to fit a string, then sets the origin and width.

Resize the frame for the label using the text you want to insert. That way you can accommodate any number of lines.

CGSize maximumSize = CGSizeMake(300, 9999);
NSString *dateString = @"The date today is January 1st, 1999";
UIFont *dateFont = [UIFont fontWithName:@"Helvetica" size:14];
CGSize dateStringSize = [dateString sizeWithFont:dateFont 
        constrainedToSize:maximumSize 
        lineBreakMode:self.dateLabel.lineBreakMode];

CGRect dateFrame = CGRectMake(10, 10, 300, dateStringSize.height);

self.dateLabel.frame = dateFrame;

12

  • 12

    you need to remove autolayout

    – hungbm06

    Oct 22, 2014 at 5:18

  • 4

    Here’s a simple way to solve the problem: stackoverflow.com/a/26632490/636559

    Oct 29, 2014 at 14:10


  • 3

    This answer is unnecessarily complicated and it is using a “word around”. Please see suggestion below of simply changing the vertical content hugging priority. Doesn’t require any code…

    – beetree

    Jan 23, 2015 at 1:45

  • 1

    [myLabel sizeToFit] is no good in UITableViewCells, since labels here are reused and new texts may not fit.

    Feb 1, 2016 at 14:47


  • 1

    You still can use AutoLayout and constraints, but assure the [height] will not be fixed. For example: Set Left, Top and Right to equals 8px, but Bottom you can set “Greater Than or Equal” 8px. It’ll say to iOS, let my sizeToFit decides the better height for my label.

    Jan 27, 2017 at 11:55

341

  1. Set the new text:

    myLabel.text = @"Some Text"
    
  2. Set the maximum number of lines to 0 (automatic):

    myLabel.numberOfLines = 0
    
  3. Set the frame of the label to the maximum size:

    myLabel.frame = CGRectMake(20,20,200,800)
    
  4. Call sizeToFit to reduce the frame size so the contents just fit:

    [myLabel sizeToFit]
    

The labels frame is now just high and wide enough to fit your text. The top left should be unchanged. I have tested this only with the top left-aligned text. For other alignments, you might have to modify the frame afterward.

Also, my label has word wrapping enabled.

4

  • This worked fine for me. I set the dimensions of my UILabel and changed numberOfLines to 0 in IB and then after setting the text called [myLabel sizeToFit].

    – Dan Ellis

    Jul 14, 2011 at 21:34

  • works perfectly for me, after setting the number of lines in Attr. Inspector

    – d2burke

    Mar 10, 2012 at 2:37

  • Does not work in case of number of lines more than 1

    – Tom

    Feb 12, 2014 at 15:58

  • It doesn’t work when you want a label of two lines, but the text requires more lines.

    Feb 6, 2015 at 16:46

162

Refering to the extension solution:

for(int i=1; i< newLinesToPad; i++) 
    self.text = [self.text stringByAppendingString:@"\n"];

should be replaced by

for(int i=0; i<newLinesToPad; i++)
    self.text = [self.text stringByAppendingString:@"\n "];

Additional space is needed in every added newline, because iPhone UILabels‘ trailing carriage returns seems to be ignored 🙁

Similarly, alignBottom should be updated too with a @" \[email protected]%" in place of "\[email protected]%" (for cycle initialization must be replaced by “for(int i=0…” too).

The following extension works for me:

// -- file: UILabel+VerticalAlign.h
#pragma mark VerticalAlign
@interface UILabel (VerticalAlign)
- (void)alignTop;
- (void)alignBottom;
@end

// -- file: UILabel+VerticalAlign.m
@implementation UILabel (VerticalAlign)
- (void)alignTop {
    CGSize fontSize = [self.text sizeWithFont:self.font];
    double finalHeight = fontSize.height * self.numberOfLines;
    double finalWidth = self.frame.size.width;    //expected width of label
    CGSize theStringSize = [self.text sizeWithFont:self.font constrainedToSize:CGSizeMake(finalWidth, finalHeight) lineBreakMode:self.lineBreakMode];
    int newLinesToPad = (finalHeight  - theStringSize.height) / fontSize.height;
    for(int i=0; i<newLinesToPad; i++)
        self.text = [self.text stringByAppendingString:@"\n "];
}

- (void)alignBottom {
    CGSize fontSize = [self.text sizeWithFont:self.font];
    double finalHeight = fontSize.height * self.numberOfLines;
    double finalWidth = self.frame.size.width;    //expected width of label
    CGSize theStringSize = [self.text sizeWithFont:self.font constrainedToSize:CGSizeMake(finalWidth, finalHeight) lineBreakMode:self.lineBreakMode];
    int newLinesToPad = (finalHeight  - theStringSize.height) / fontSize.height;
    for(int i=0; i<newLinesToPad; i++)
        self.text = [NSString stringWithFormat:@" \n%@",self.text];
}
@end

Then call [yourLabel alignTop]; or [yourLabel alignBottom]; after each yourLabel text assignment.

10

  • @D.S. I noticed that you are adding VerticalAlign between parenthesis after @implementation UILabel. Being new to Objective-C I haven’t ran across this syntax before. What is this called?

    – Julian

    May 12, 2011 at 16:05

  • Amazing, didn’t know about categories, this gives me even more appreciation for the Objective-c language. Learning more languages is so important to become a good programmer.

    May 26, 2011 at 8:04

  • Gave an upvote. but iirc this won’t work if you do not know the number of lines which is a downside

    – Tjirp

    Nov 30, 2011 at 10:02

  • I’ve to show 3 lines of text and align text to top. So, do I’ve to set number of lines to 3. When I set it to 3, i’m seeing “…” if the text is less (that fits in one line). How to avoid this “…”

    – Satyam

    Dec 10, 2011 at 16:41

  • 1

    I posted an edit of this category, hopefully it will be approved shortly. The methods sizeWithFont:constrainedToSize:lineBreakMode: and sizeWithFont: are both depreciated in iOS7. Also, this category only works on labels when numberOfLines is greater than 0.

    Apr 1, 2014 at 18:32