Vertically align text to top within a UILabel

uilabel vertical alignment bottom
uilabel vertical alignment center
uilabel center text
label align text top
align text to top xcode
uilabel vertical alignment swift storyboard
uilabel vertical text
swift ui align to top

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?

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];


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 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];

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;


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.

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;

How to set top-left alignment for UILabel for iOS application?, Rather than re-explaining, I will link to this rather extensive & highly rated question/answer: Vertically align text to top within a UILabel. The short answer is no,  Vertically align text to top within a UILabel in swift H_Developer Apr 30, 2019 4329 0 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.

  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.

Vertically align text within a UILabel (Note : Using AutoLayout , Edit. In my original answer I was using the paragraph style of the label. Turns out that for multi-line labels this actually prevents the label from  Reframing the UILabel. The big plus here is the low overhead of the UILabel. This is usually the way to go if you are also laying out content around the label that depends on how large the text is inside. However, a lot of the calculations are going to be the same, and sometimes a simple vertical alignment property is desired. Subclassing the

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 @" \n@%" in place of "\n@%" (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.

Vertically align text to top within a UILabel - Mr.Javed Multani, 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  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.

Just in case it's of any help to anyone, I had the same problem but was able to solve the issue simply by switching from using UILabel to using UITextView. I appreciate this isn't for everyone because the functionality is a bit different.

If you do switch to using UITextView, you can turn off all the Scroll View properties as well as User Interaction Enabled... This will force it to act more like a label.

Vertically align text to top within a UILabel in swift, 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  ios left Vertically align text to top within a UILabel. uilabel vertical alignment bottom (24) In swift, let myLabel : UILabel! To make your text of your Label to fit to screen and it's on the top. myLabel.sizeToFit() To make your font of label to fit to the width of screen or specific width size.

No muss, no fuss

@interface MFTopAlignedLabel : UILabel

@end


@implementation MFTopAlignedLabel

- (void)drawTextInRect:(CGRect) rect
{
    NSAttributedString *attributedText = [[NSAttributedString alloc]     initWithString:self.text attributes:@{NSFontAttributeName:self.font}];
    rect.size.height = [attributedText boundingRectWithSize:rect.size
                                            options:NSStringDrawingUsesLineFragmentOrigin
                                            context:nil].size.height;
    if (self.numberOfLines != 0) {
        rect.size.height = MIN(rect.size.height, self.numberOfLines * self.font.lineHeight);
    }
    [super drawTextInRect:rect];
}

@end

No muss, no Objective-c, no fuss but Swift 3:

class VerticalTopAlignLabel: UILabel {

    override func drawText(in rect:CGRect) {
        guard let labelText = text else {  return super.drawText(in: rect) }

        let attributedText = NSAttributedString(string: labelText, attributes: [NSFontAttributeName: font])
        var newRect = rect
        newRect.size.height = attributedText.boundingRect(with: rect.size, options: .usesLineFragmentOrigin, context: nil).size.height

        if numberOfLines != 0 {
            newRect.size.height = min(newRect.size.height, CGFloat(numberOfLines) * font.lineHeight)
        }

        super.drawText(in: newRect)
    }

}

Swift 4.2

class VerticalTopAlignLabel: UILabel {

    override func drawText(in rect:CGRect) {
        guard let labelText = text else {  return super.drawText(in: rect) }

        let attributedText = NSAttributedString(string: labelText, attributes: [NSAttributedString.Key.font: font])
        var newRect = rect
        newRect.size.height = attributedText.boundingRect(with: rect.size, options: .usesLineFragmentOrigin, context: nil).size.height

        if numberOfLines != 0 {
            newRect.size.height = min(newRect.size.height, CGFloat(numberOfLines) * font.lineHeight)
        }

        super.drawText(in: newRect)
    }

}

A Guide on how to Vertically Align a UILabel, There are many ways to achieve vertically aligned text, each with their pros and cons. This only works for top alignment (the only vertical alignment out content around the label that depends on how large the text is inside. Vertically align UILabel. I am trying to vertically align the text in the UILabel view of my app. The problem is that I want the text to be vertically aligned to the top and the size of the label to be 280 x 150.

Text in UILabel doesn't center vertically |Apple Developer Forums, The text is actually aligned to the top of the row, like if there were two lines to display in the row. I tried to add constraints (align in container), or  Ensure your text label's number of lines is set to 0. Select your text label and pin the top, left, and right constraints. Hit the 'Add 3 Constraints' button at the bottom. Update your frames (to see the updated alignment in storyboard).

iOS, NSTextAlignmentJustified , NSTextAlignmentNatural. Vertical alignment in UILabel is not supported out of the box: Vertically align text to top within a UILabel. How to Vertically Align Text in Word When you want to position text in a section of a document relative to the top and bottom margins, use vertical alignment. To reflect a change in the vertical alignment, the document page or pages must be only partially full of text.

Vertically align text to top within a UILabel in swift, 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  Ok the problem: I have a UILabel which gets text dynamically assigned to it. If I resize the label to cover the entire view controller the text is stuck in the middle. I found a bunch of solutions which say to add the following code: detailsLabel.numberOfLines = 0; detailsLabel.sizeToFit() However this doesn't do anything.

Comments
  • you need to remove autolayout
  • Here's a simple way to solve the problem: stackoverflow.com/a/26632490/636559
  • If you use auto layout and storyboard, adding a constraint with option "Remove at build time" checked will help
  • If you need this working with adjustsFontSizeToFitWidth then use sizeToFit then set the label's frame to 0, 0, theWidthYouWant, label.frame.size.height (which is the new height determined by sizeToFit) THEN apply adjustsFontSizeToFitWidth
  • 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...
  • Hey Ben, I just looked at my old code again, and updated my answer with the correct steps necessary.
  • 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].
  • works perfectly for me, after setting the number of lines in Attr. Inspector
  • Does not work in case of number of lines more than 1
  • It doesn't work when you want a label of two lines, but the text requires more lines.