Is adding max-width to a text a good way for a line break design in css?

i was trying to copy kevin powell's challenge 3, at first i was trying to figure out how to add a line break just like in the challenge 3 video, "Response layouts don't have <linebreak> to be a struggle" and came up by adding a max-width of 650px for that, same goes for the paragraph, i added a max-width of 520px

.container {
width: 100%;
background: #23424a;
color: white;
padding: 100px;
}

.container h2 {
margin-bottom: 20px;
font-size: 3rem;
max-width: 650px;
border: red 2px solid;
}

.container p {
margin-bottom: 50px;
max-width: 520px;
border: red 2px solid;
}

is this a good approach or a bad practice for a beginner?

13eck•7/26/24, 4:13 PM

If you want a line break then use the line break element: . No CSS needed

Lamer of Sweden•7/26/24, 5:38 PM

I would avoid using at least in that context (heading) due to accessibility (screen readers) as stated on MDN. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br#accessibility

And furthermore it most likely will cause unwanted line breaks in other viewports.

Instead use either

px

px

or rather use as unit and counter the amount of characters. In this example for the h1

MDN Web Docs

: The Line Break element - HTML: HyperText Markup Language | MDN

The HTML element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.

Jochem•7/26/24, 7:58 PM

That section is specifically speaking about creating paragraphs of text, as in separating several sentences on one topic from the next several sentences in the same document.

Jochem•7/26/24, 7:59 PM

the announcement of the linebreak shouldn't be too bad cause it's just a single case, but it's worth considering.

Jochem•7/26/24, 8:00 PM

using px in this case is a bad idea, as you can't control for the user setting the root font size larger

Jochem•7/26/24, 8:02 PM

ch has a caveat as well, as it's based on the width of the 0 character, so it's not a one to one translation. It's still a valid option though