iOS AutoLayout - Label overlaps nearby label

Question

I have a problem with a label constraint.

My goal is to have 2 labels on the same Y coordinate of a tableViewCell. One of the labels is pinned on the left side and the other is pinned on the right side.

Like that:

[This is the first label]      [Second]

The first label should have a dynamic width based on the text which it has to display, BUT it should end about 20 points to the second label.

I tried that with numerous constraints, but sometimes the first label seem to push the second label out of the view and sometimes the first label just overlaps the second label like in this example:

The first label has constraints for:

Top Space to Superview
Leading Space to Superview
Bottom Space to a third label
Trailing Space to THE second Label (<= 20)

What is the correct way to display the two labels correctly?

Thanks in advance, appreciate your help!

EDIT

Tried the solution with giving the second label a maxwidth. Now, it is randomly working or not working. I don't get this at all.

Answer 1

Like others have said, you need to set the trailing constraint from the left label to the right label as greater than or equal to, so that there is a gap of at least 20 between the two.

But, you also need to designate which label truncates first. By not doing this, iOS will take it upon itself to choose, which is probably why your current solution works only some of the time. This is where Content Compression Resistance Priority comes into play. Set the value lower for the label you want to truncate first.

You can do this on your storyboard under the size inspector.

I'm assuming you want your left label to truncate first. In that case, make sure the left label has a lower horizontal content compression resistance priority than the right label. Notice how above I just dropped it to 749, as the default is 750.

Check out this answer for a good explantation on content compression and content hugging.