Words loves wrapping
We all know that text spread across a large screen can be hard to read. We want to limit the space that the text occupies. There are several ways to handle this, but I’ll show you one that I like a lot.
p {
width: min(100%, 60ch);
}So, what does this actually do? It sets the width of the paragraph to take up 100% of the parent width until the width reaches 60 characters, at which point it stops growing. It will always pick the smaller value between 100% and 60ch. One advantage of this over using percentages, pixels (px), or viewport units (vw/vh) to represent width is that when you’re using relative units like em or rem for the font size, the width automatically adjusts as the font grows.
Smart right!?
