IOS how to truncate with ellipsis the last visible line of a paragraph?

Question

I want to draw a paragraph (so i guess using CTFrameDraw or ctlinedraw) but i also need to truncate the text if it not fit in the defined area (rect). Normally we trim the last line by appending an ellipsis (ie the characters '...') How to do this ? How to do this with special char like '...[+]'

Also, i would like to know how to specify an indent (in pixel) for the very first line and if it's possible de define custom linespacing

and to finish, i need to know the exact final rect that will fit exactly the full paragraph (it's maybe lower than the defined area)

Pentane

Answer 1

 NSMutableParagraphStyle *paragraph = [[NSMutableParagraphStyle alloc] init];
    paragraph.lineBreakMode = NSLineBreakByTruncatingTail;
    [attributedString addAttribute:NSParagraphStyleAttributeName value:paragraph range:NSMakeRange(0, [attributedString length])];
    descriptionLabel.attributedText = attributedString;

Use above code and to your UIelement label or button like this .U will get ellipses at the last line. And i am also tried to append string at end but i didnot. because in limited area the label shows fit information only remaining hides .On that line means except ellipses i tried some text.Sorry to giving less info.

Clywd

Answer 2

Copy the following code to viewDidLoad in a test project.

// Set the size of the area the paragraph will be drawn in.
CGSize sizeOfTextArea = CGSizeMake(200.0f, 100.0f);

// Sample text and views.
NSString *text = @"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.";
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, sizeOfTextArea.width, sizeOfTextArea.height)];
imageView.backgroundColor = [UIColor whiteColor];
[self.view addSubview:imageView];
self.view.backgroundColor = [UIColor blackColor];
CGRect textRect = imageView.frame;
UIButton *moreBtn = [UIButton buttonWithType:UIButtonTypeCustom];
moreBtn.frame = CGRectMake(CGRectGetMaxX(textRect)-45, CGRectGetMaxY(textRect), 45, 20);
[moreBtn setTitle:@"more" forState:UIControlStateNormal];
[self.view addSubview:moreBtn];

// Create a paragraph style and add it to attributed text options.
NSMutableParagraphStyle *style = [[NSParagraphStyle defaultParagraphStyle] mutableCopy];
style.firstLineHeadIndent = 10.0f;  // <- CHANGE THIS TO ADJUST INDENT
style.lineSpacing = 10.0f;          // <- CHANGE THIS TO ADJUST LINE SPACING
NSDictionary *attributes = @{NSParagraphStyleAttributeName : style};

// Render the text
// The options set the text to word-wrap and to add an ellipsis if needed.
UIGraphicsBeginImageContext(sizeOfTextArea);
NSAttributedString *attributedText = [[NSAttributedString alloc] initWithString:text attributes:attributes];
[attributedText drawWithRect:CGRectMake(0, 0, sizeOfTextArea.width, sizeOfTextArea.height)
                     options:NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingTruncatesLastVisibleLine
                     context:nil];
UIImage *renderedText = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

// Display the rendered text.
imageView.image = renderedText;

// Calculate the rect for the full text.  We fix the width and let iOS calculate the height.
CGRect fullTextRect = [attributedText boundingRectWithSize:CGSizeMake(sizeOfTextArea.width, CGFLOAT_MAX)
                                                   options:NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading
                                                   context:nil];
NSLog(@"full rect: %@", NSStringFromCGRect(fullTextRect));

// Show/hide more button depending on whether there's more text to show
moreBtn.hidden = CGRectGetHeight(fullTextRect) <= sizeOfTextArea.height;

As for the [+] after the ellipsis, add a 'more' button instead after the text that gets shown or hidden depending on whether there's more text to show (see the above code to see what I mean).

Laurenelaurens

thanks jp2g but i don't understand how to replace the '...' with something like '...[+]' or something like "... more" ? – Pentane

@loki : I updated the sample code to include a 'more' button. – Laurenelaurens

ooh i see how you do, you place the button in the top of the text in fact :( this is an idea, but this will not return a beautiful result because the text will be truncated everywhere, like for exemple in the middle of a char :( – Pentane