is it a bad practice to use <br> to break line at a specific word in html?

i have 4 words and i simply for visual need of a design need to break the line at word 2, is using <br> okay professionally? and if not what would be a css alternative ?
No description
56 Replies
b1mind
b1mind10mo ago
its what <br />'s are there for
Aozen
Aozen10mo ago
i am trying to do this i was successful but i resorted to using <br> i am just hoping people can help me if it's considered bad to do especially for accessibility?
b1mind
b1mind10mo ago
I'll often do it just as a "mobile" class too
Aozen
Aozen10mo ago
what do you mean?
b1mind
b1mind10mo ago
If I want a headline to break specificly how I want at a breakpoint but yes its fine to use that way its what is was made for. the only real "bad practice" I see with <br /> is for a dirty space/margin 😄 ... even then its debatable how bad it is 😂
Aozen
Aozen10mo ago
why do you use that instead of <br> if br was made for that? also can you give me an example of it?
b1mind
b1mind10mo ago
use what?
Aozen
Aozen10mo ago
that mobile class thing if you know another method other than br can you show it to me?
b1mind
b1mind10mo ago
Oh I'm just saying I will have it only visible for mobile lets say, or a specific break point I want it do line break on. still a <br /> doing what it does "line break"
Aozen
Aozen10mo ago
okay so no one would say i am doing a bad practice or basically view me in a bad way for using it for the simple purpose of breaking a line at a specific word
b1mind
b1mind10mo ago
I wouldn't worry about it ... but correct
Aozen
Aozen10mo ago
i am new at the job and i do not want to look bad yet XD
b1mind
b1mind10mo ago
If this is for real work? Then ask your team what they want Easy way to do the right thing 😄
Aozen
Aozen10mo ago
it is for real work ( but right now ) i was given a design and i am following it ( i asked this question because i always for some reason thought br was a bad practice for accessibility) i don't even remember why i thought that i just don't want to mess up ( but overall the other stuff are working fine ^^)
b1mind
b1mind10mo ago
Again ask the team 😄 Nothing wrong with asking but yes if that is the design and that line break happens for every screen a <br /> is fine
Aozen
Aozen10mo ago
well i think for a change i actually got to a solution before asking so i doubt anyone would be bothered
b1mind
b1mind10mo ago
if it gets smaller than that... just know how it will behave and maybe will have to remove the <br /> in those sizes/cases
Kevin Powell
Kevin Powell10mo ago
text-wrap: balance might do the trick these days, depending on the text of course
b1mind
b1mind10mo ago
yea if its going to get smaller text-wrap might be more elegant too that way its not breaking up odd if it gets smaller.
angelus12
angelus1210mo ago
i wouldn't opt for <br> in this case unless you're out of options.
Aozen
Aozen10mo ago
it is only 4 words ( basically i tried to find an answer in your videos but i could not)
b1mind
b1mind10mo ago
But why? give us your reasoning People are so weird about not using things ... like that is litterly what <br /> is for 😄
Aozen
Aozen10mo ago
well i am here precisely to learn why so am open
angelus12
angelus1210mo ago
because it give a lot of issue with responsive design. <br> only works when something has a fixed with, but even then if the font-size changed you might get issues again. That the <br> is moved down to the second line. as Kevin was saying text-wrap: balance; or just set a with on the container and let the content do what it wants to do
b1mind
b1mind10mo ago
And that is what I said with using a breakpoint to hide/show as needed 🙂
clevermissfox
clevermissfox10mo ago
There’s also <wbr> alternatively
Aozen
Aozen10mo ago
what does text-wrap : balance do? what is that?
clevermissfox
clevermissfox10mo ago
I’m now reading thru and seeing that you want the break all the time so it may not work for this
Kevin Powell
Kevin Powell10mo ago
If you have
Some text that is not
balanced.
Some text that is not
balanced.
It tries to balance it:
Some text that
is not balanced
Some text that
is not balanced
But it's not perfect, and you have no control over where it breaks things. I think it works up to 3 lines of text.
Aozen
Aozen10mo ago
why do they simply not have a way to after x words break the line always? XD
clevermissfox
clevermissfox10mo ago
It basically tells the browser “if you’re gonna put a break, put it here”
Aozen
Aozen10mo ago
how hard is it to implement such a thing ? like in css3 ? as a function or attribute or something?
b1mind
b1mind10mo ago
I didn't know about this ty, going to have to play some.
Kevin Powell
Kevin Powell10mo ago
that's what br is for. Or, you could use max-width: Xch. ch is how many characters wide (roughly), so if you need 30 characters wide, 30ch
clevermissfox
clevermissfox10mo ago
Max-width in character ? Yes
Aozen
Aozen10mo ago
tha is actually really smart XD i could count the characters ( since it is constantly the same text and will not change ever)
clevermissfox
clevermissfox10mo ago
I was also wondering if you just wrap the second line of the heading in a span and make it display block
Aozen
Aozen10mo ago
and even if it does counting again is not a huge issue ( for now) some people used that but also not sure about it
Kevin Powell
Kevin Powell10mo ago
<wbr> is for word breaks though, not line breaks
clevermissfox
clevermissfox10mo ago
What’s Xch vs ch? It’s looking specifically at the width of the x in that typeface?
Kevin Powell
Kevin Powell10mo ago
i just mean x as a placeholder for however many characters you need 😄
Aozen
Aozen10mo ago
so overall i will either keep the br or use the max-width : Xch; and for future more flexibile text text-wrap: balance;
clevermissfox
clevermissfox10mo ago
It works for line breaks too though
Aozen
Aozen10mo ago
i think he means that it's main purpose is to break words ( also it would be slightly unpredictable )
clevermissfox
clevermissfox10mo ago
And is less strict than br which is ALWAYS break here.
b1mind
b1mind10mo ago
Br with a container query, using ch for width 🥲
Aozen
Aozen10mo ago
is that not a bit overkill?
b1mind
b1mind10mo ago
I mean maybe? Not really
clevermissfox
clevermissfox10mo ago
So it makes it a little more responsive depending on your goal. Text is all on one line but as screen size shrinks and it’s deciding where to break you’ve told it where you prefer it break. 🤷🏻‍♀️ works for me when I need it! But agree that max-width in ch prob is the best solution here
b1mind
b1mind10mo ago
I'd have to see the parent to agree with that 😄 or how things flow when being responsive #depends
Aozen
Aozen10mo ago
thank you all for your answers i really appreciate it ( but is there a way to save these replies on this server ? like a section for each user to save advice and responses given in the question tabs?
b1mind
b1mind10mo ago
The posts live on, you can search your posts or just ingeneral too
Aozen
Aozen10mo ago
the post remains forever i can go back to it and check? so if i save the question title i should be able to come back to it anytime ( i will do that in a google doc )
b1mind
b1mind10mo ago
They close after a few weeks but yes they should be there forever* unless removed.
Aozen
Aozen10mo ago
thank you and thank you all clevermissfox b1mind Kevin and angelus12
angelus12
angelus1210mo ago
you're welcome
Want results from more Discord servers?
Add your server