Multiline label in UIStackView

Question

When putting multiline label (with linebreak set to Word Wrap) into a stack view, the label immediately loses the linebreak and displays the label text in one line instead.<

Answer 1

System layout should figure out origin, width and height to draw it subviews, in this case all of your subviews has same priority, that point make conflict, layout system don't known dependencies between views, which one draw first, second and so on

Set stack subviews compression will solve problem with multiple line, depending on your stack view is horizontal or vertical and which one you want to become multiple lines. stackOtherSubviews .setContentCompressionResistancePriority(.defaultHight, for: .horizontal) lblTitle.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)

Answer 2

In my case, I followed the previous suggestions, but my text was still getting truncated to a single line though only in landscape. Turns out, I found an invisible \0 null character in the label's text which was the culprit. It must have been introduced alongside the em dash symbol I had inserted. To see if this is also happening in your case, use the View Debugger to select your label and inspect its text.

Answer 3

Xcode 9.2:

Just set number of lines to 0. Storyboard will look weird after setting this. Don't worry run the project. While running everything will resize according to your storyboard setup. I think its kind of bug in storyboard.

Tips : Set "number of liner to 0" in the last. reset it when you want to edit some other view and set to 0 after editing.

Answer 4

• First set the label number of lines to 0
• The stack view still won't grow to multiLine unless you give it a fixed width. When we fix its width then it break to multiline when that width is reached as shown:

If we don't give a fixed width to the stack view then things get ambiguous. How long will the stack view grow with the label (if the label value is dynamic)?

Hope this can fix your issue.

Answer 5

Setting preferredMaxLayoutWidth to the UILabel worked for me

self.myLabel.preferredMaxLayoutWidth = self.bounds.size.width;

Answer 6

The following is a Playground implementation of multi-line label with a line break inside a UIStackView. It doesn't require embedding the UILabel inside anything and has been tested with Xcode 9.2 and Swift 4. Hope it's helpful.

import UIKit
import PlaygroundSupport

let containerView = UIView()
containerView.frame = CGRect.init(x: 0, y: 0, width: 400, height: 500)
containerView.backgroundColor = UIColor.white

var label = UILabel.init()
label.textColor = .black
label.numberOfLines = 0
label.translatesAutoresizingMaskIntoConstraints = false
label.text = "This is an example of sample text that goes on for a long time. This is an example of sample text that goes on for a long time."

let stackView = UIStackView.init(arrangedSubviews: [label])
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .vertical
stackView.distribution = .fill
stackView.alignment = .fill
containerView.addSubview(stackView)
stackView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true
stackView.centerYAnchor.constraint(equalTo: containerView.centerYAnchor).isActive = true
stackView.widthAnchor.constraint(equalTo: containerView.widthAnchor).isActive = true
stackView.heightAnchor.constraint(equalTo: containerView.heightAnchor).isActive = true

PlaygroundPage.current.liveView = containerView