Is there a way to add line breaks with CSS
I'm working on a little challenge and in the mobile responsive section I need to have the text with less line breaks compare to the dekstop version.
Can you use CSS to add line breaks or is there another way to do that other than using the tags
15 Replies
can you explain what you mean by different form? perhaps send a screenshot of what you want?
@snxxwyy This is what I'm trying to replicate. I'm guessing this is done with line breaks but from my learning and reading so far i've been seeing more and more devs request to not use a lot of
`<br> tags
It looks like the text is just going to the next line because there is no more room on the current line. This doesn't require any special code to cause the line break. It just happens automatically, as long as the container that the text is in has a fixed width.
@chooking oh okay i think my width probably too big let me try something thanks also for the insight
you mean the gaps between "perfume", "gabrielle essence eau de parfum" and the description?
or the description text just moving down to the next line?
and in my opinion i wouldn't over use
br tags, it can confuse people who look through your code where certain spacing is coming from, the odd space for me is okay but when it's spacing between multiple elements etc i tend to just make the container a grid and add a gap (if you're following kevin's video on this i believe he actually talks about the same thing π
), or add a content flow property if you're seperating sections rather than elements.I figure it out. @snxxwyy and I'm just remaking this as a challeng on my own trying to learn some new stuff as I figure it out.
π
You can use a div as an empty element..ID for CSS and give it a height and width. And a position.
are you suggesting that in reference to the gaps between each text element?
Yes. Then you can CSS the heck out of it. Margin.padding.ect
yeah that would work for sure, in some situations i think that would cause redundant html though and it'd be beneficial to do what i mentioned above or something similar. honestly depends on the situation though.
Or wrap your current elements in a div and ID them . You can give them padding and margin.
yeah, lots of solutions for these sorts of things, never a dull moment with css π
I would see that as an absolute last resort. Being pixel perfect is an unattainable dream, so it's best to just accept your site don't look identical on all devices. Also, the more you force things to be in the place you want them to be, the more likely your site is to break from minor changes.
Especially if you're copying a design, just accept that the breaks will be in different places sometimes
So many different ways to complete this lol. Definatly never a dull moment