title: How to create a UILabel dynamic height and layout anchor constraints?
body: <p>I have a UILabel that gets updated with text of varying of lengths and is positioned with layout anchor constraints. I am having trouble with getting the correct height. Sometimes the last line is cut off but not always. </p>
  
  <p>defining the label</p>
  
  <pre><code>message.textAlignment = .center
  message.numberOfLines = 0
  message.preferredMaxLayoutWidth = frame.width
  message.lineBreakMode = .byWordWrapping
  popUpWindow.addSubview(message)
  
  message.translatesAutoresizingMaskIntoConstraints = false
  message.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: POP_UP.SPACING_Y).isActive = true
  message.leftAnchor.constraint(equalTo: layoutGuide.leftAnchor, constant: POP_UP.EDGE_INSET).isActive = true
  message.rightAnchor.constraint(equalTo: layoutGuide.rightAnchor, constant: -POP_UP.EDGE_INSET).isActive = true
  message.bottomAnchor.constraint(equalTo: cancel.topAnchor, constant: -POP_UP.SPACING_Y).isActive = true```
  
  </code></pre>
  
  <p>updating the text. newText varies in length.</p>
  
  <pre><code>message.text = newText
  message.sizeToFit()
  setNeedsLayout()
  </code></pre>
  
  <p>sample input:</p>
  
  <pre><code>newText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/uY0Uc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uY0Uc.png" alt="enter image description here"></a></p>
  
  <p>note that "ut labore et dolore magna aliqua." is cut off.</p>
  
  <p>(full layout constraints for reference)</p>
  
  <pre><code>let layoutGuide = popUpWindow.safeAreaLayoutGuide
  
  popUpWindow.translatesAutoresizingMaskIntoConstraints = false
  popUpWindow.centerXAnchor.constraint(equalTo: safeAreaLayoutGuide.centerXAnchor).isActive = true
  popUpWindow.centerYAnchor.constraint(equalTo: safeAreaLayoutGuide.centerYAnchor).isActive = true
  popUpWindow.widthAnchor.constraint(equalTo: safeAreaLayoutGuide.widthAnchor, multiplier: 0.75).isActive = true
  
  imageView.translatesAutoresizingMaskIntoConstraints = false
  imageView.topAnchor.constraint(equalTo: layoutGuide.topAnchor, constant: POP_UP.EDGE_INSET).isActive = true
  imageView.centerXAnchor.constraint(equalTo: popUpWindow.centerXAnchor).isActive = true
  imageView.widthAnchor.constraint(equalTo: popUpWindow.widthAnchor, multiplier: 0.35).isActive = true
  
  message.translatesAutoresizingMaskIntoConstraints = false
  message.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: POP_UP.SPACING_Y).isActive = true
  message.leftAnchor.constraint(equalTo: layoutGuide.leftAnchor, constant: POP_UP.EDGE_INSET).isActive = true
  message.rightAnchor.constraint(equalTo: layoutGuide.rightAnchor, constant: -POP_UP.EDGE_INSET).isActive = true
  message.bottomAnchor.constraint(equalTo: cancel.topAnchor, constant: -POP_UP.SPACING_Y).isActive = true
  
  cancel.translatesAutoresizingMaskIntoConstraints = false
  cancel.topAnchor.constraint(equalTo: message.bottomAnchor, constant: POP_UP.SPACING_Y).isActive = true
  cancel.leftAnchor.constraint(equalTo: layoutGuide.leftAnchor, constant: POP_UP.EDGE_INSET).isActive = true
  cancel.bottomAnchor.constraint(equalTo: layoutGuide.bottomAnchor, constant: -POP_UP.EDGE_INSET).isActive = true
  
  ok.translatesAutoresizingMaskIntoConstraints = false
  ok.topAnchor.constraint(equalTo: message.bottomAnchor, constant: POP_UP.SPACING_Y).isActive = true
  ok.rightAnchor.constraint(equalTo: layoutGuide.rightAnchor, constant: -POP_UP.EDGE_INSET).isActive = true
  ok.leftAnchor.constraint(equalTo: cancel.rightAnchor, constant: POP_UP.SPACING_X).isActive = true
  ok.heightAnchor.constraint(equalTo: cancel.heightAnchor).isActive = true
  ok.widthAnchor.constraint(equalTo: cancel.widthAnchor).isActive = true
  </code></pre>
  
  <p><strong>UPDATE:</strong>
  I noticed there was a mismatch between my preferred width and my left and right constraint anchors which may have been causing the height to be calculated shorter than it should have been. </p>
  
  <p>here are the updates I made in case anyone is having the same issue:</p>
  
  <p>changed preferred width:</p>
  
  <pre><code>message.preferredMaxLayoutWidth = frame.width * 0.5
  </code></pre>
  
  <p>removed left and right anchor constraints and added width constraint making sure it has the exact same value as preferredMaxLayoutWidth:</p>
  
  <pre><code>message.widthAnchor.constraint(equalToConstant: frame.width * 0.5).isActive = true
  message.centerXAnchor.constraint(equalTo: layoutGuide.centerXAnchor).isActive = true
  </code></pre>