Force break short words
Is it possible to break a short words by force, even when elements' width is larger? I don't need to minimize width, just want to add some padding around, also do not want to use <br>.
TRIED:
13 Replies
Can you give me an example? I don't follow
word-break: break-all; should be what you're looking for, but you said you tried that?So, you want a new line after the space if i'm correct? Even if there is enough space for only 1 line?
no, without a newline character or a break, don't think that'll work.
maybe if change to a
display:inline-block (or grid/flex), then you could use width: min-content
But don't know if that suits your situation
I mean that i have one sentence that has two words. I want those word to break (to be one under another). Also to add some spacing with padding to make itself (element, in this case <a>) to be a little bit wider
i can try to make it using figma for example, i will sent you an image
why don't you use the
<wbr> element?
it will automatically break then there isn't enough space
or just use a <br>
which is exactly what that element is fori dont want to use <br> thats the point
there is an example
those green lines for padding
is there any reason to do not want to use it?
i always tried to not use it. I just dont like it. But if there is no way to do this without <br> then i will use this tag
it's certainly the easiest way to achieve it
this works, thank you
If nothing else works you can just give it a max width of however many characters the first word has, for example
max-width: 10ch;