Loading
Current section: Implementation 12 exercises
lesson

Prevent Line Break Jumps with Fixed Widths

Adding a fixed width to the text will prevent the line breaks from jumping around.

However, we can't add a fixed width to the parent div because that would cause the background gradient to shrink with it:

![Fixed width on the parent shrinks the gradient](https://res.cloudinary.com/epic-web/image/u

Loading lesson

Transcript

00:00 And this is probably the reason why you can see that there is a MaxWidthContainer here to the text to make sure that the text never jumps, because with fluid text, you are very likely to hit this line break change while the width of the container changes.

00:19 And I can't just add a width directly here because we have a background gradient, which is going to show, and that's another problem. So instead, we will wrap the H2N paragraph in another div, and on this div here, let's have a class of, let's go W64,

00:38 and the problem is now solved. Let's try width 48, and yes, that looks really good. I just cannot handle the line height here, which is too big. So let's add leading and we'll go with leading tight,

00:58 and I think this is looking much better. (upbeat music) (upbeat music)