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 ?
56 Replies
its what
<br />'s are there fori 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?
I'll often do it just as a "mobile" class too
what do you mean?
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 😂
why do you use that instead of <br> if br was made for that? also can you give me an example of it?
use what?
that mobile class thing
if you know another method other than br can you show it to me?
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"
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
I wouldn't worry about it ... but correct
i am new at the job and i do not want to look bad yet XD
If this is for real work? Then ask your team what they want
Easy way to do the right thing 😄
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 ^^)
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
well i think for a change i actually got to a solution before asking so i doubt anyone would be bothered
if it gets smaller than that... just know how it will behave and maybe will have to remove the <br /> in those sizes/cases
text-wrap: balance might do the trick these days, depending on the text of courseyea if its going to get smaller text-wrap might be more elegant too that way its not breaking up odd if it gets smaller.
i wouldn't opt for <br> in this case unless you're out of options.
it is only 4 words ( basically i tried to find an answer in your videos but i could not)
But why? give us your reasoning
People are so weird about not using things ...
like that is litterly what <br /> is for 😄
well i am here precisely to learn why so am open
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
And that is what I said with using a breakpoint to hide/show as needed 🙂
There’s also <wbr> alternatively
what does text-wrap : balance do?
what is that?
I’m now reading thru and seeing that you want the break all the time so it may not work for this
If you have
It tries to balance it:
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.
why do they simply not have a way to after x words break the line always? XD
It basically tells the browser “if you’re gonna put a break, put it here”
how hard is it to implement such a thing ? like in css3 ? as a function or attribute or something?
I didn't know about this ty, going to have to play some.
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, 30chMax-width in character ?
Yes
tha is actually really smart XD
i could count the characters ( since it is constantly the same text and will not change ever)
I was also wondering if you just wrap the second line of the heading in a span and make it display block
and even if it does counting again is not a huge issue ( for now)
some people used that but also not sure about it
<wbr> is for word breaks though, not line breaksWhat’s Xch vs ch? It’s looking specifically at the width of the x in that typeface?
i just mean
x as a placeholder for however many characters you need 😄so overall i will either keep the br or use the max-width : Xch; and for future more flexibile text text-wrap: balance;
It works for line breaks too though
i think he means that it's main purpose is to break words ( also it would be slightly unpredictable )
And is less strict than br which is ALWAYS break here.
Br with a container query, using ch for width 🥲
is that not a bit overkill?
I mean maybe? Not really
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
I'd have to see the parent to agree with that 😄
or how things flow when being responsive #depends
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?
The posts live on, you can search your posts or just ingeneral too
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 )
They close after a few weeks but yes they should be there forever* unless removed.
thank you
and thank you all clevermissfox b1mind Kevin and angelus12
you're welcome