Whitespace when line-wrapping
I have an element that is forced to line-wrap due to width constraints, but this causes unwanted whitespace on the inner-right end of the content box. How do I ensure that there is no whitespace, regardless of text length? I cannot change the structuring of this, only CSS. Word-breaking and hyphenation, justified text and width: min-content cannot be used, either.
Link to codepen with structure: https://codepen.io/yayokb/pen/OJarRVe
14 Replies
You can try to add the
hyphens: auto;
property to break words when they reach the end of the available width.Hi, thanks for the reply :) Unfortunately, breaking words isn't an option either :/ The client is very picky lol
The only option that I know to completely remove all white-space produced by the text is to use
width: min-content
. If you also remove the parent's max width, it would allow the container to grow or shrink to take exactly the amount of space that is required.Thanks! It works, but it's not a preferable fix. If there really isn't anything that can fix it without using min-content and changing the max-width, then so be it :P
Yeah, I mean... you can't really set a max width and still have any text fit into that nicely. The only solution to that is to manually set the exact amount of width for a particular text. But that will likely cause a lot of work and issues handling responsiveness.
If you simply remove the max-width from the parent it will fit in automatically, but it may stretch wider than what you want it to be.
lol if you want to be a real maniac, you could do
text-align: justify;
But unfortuantely, that max-width is really dictating quite a bit. Any particular reason that cannot be changed?
The absolute worse way I could think of to handle this would be using javascript, but that would just be to override what you put yourself into the css
Are you just trying to center it?
The element is a tooltip that appears on hover over a card. There are multiple cards per page, with small widths. So the max-width is to remove the chance of the tooltip text overflowing the card's width.
Well....I would love to know a CSS solution but I just can't think of one right now
How I did it in Javascript is as follows:
And for your HTML
You need to wrap the text in a span
it makes it an inline element
That's how I was left with this. No extra whitespace. Just the padding
This is a terrible solution if the text changes or anything though
You'd need to adjust the javascript to suit your purposes
Thanks croganm :) Pity there isn't an obvious CSS only solution...
I'm sure there's probably one but it really is slipping my mind right now. I apologize, but if I think of it I'll let you know!