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?
3 Replies
I would avoid using
<br> 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 or rather use ch as unit and counter the amount of characters. In this example for the h1 max-width: 24chMDN 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.
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.
the announcement of the linebreak shouldn't be too bad cause it's just a single case, but it's worth considering.
using px in this case is a bad idea, as you can't control for the user setting the root font size larger
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