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
Joao
Joao16mo ago
You can try to add the hyphens: auto; property to break words when they reach the end of the available width.
Kate
Kate16mo ago
Hi, thanks for the reply :) Unfortunately, breaking words isn't an option either :/ The client is very picky lol
Joao
Joao16mo ago
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.
Kate
Kate16mo ago
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
Joao
Joao16mo ago
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.
croganm
croganm16mo ago
lol if you want to be a real maniac, you could do text-align: justify;
croganm
croganm16mo ago
croganm
croganm16mo ago
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?
Kate
Kate16mo ago
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.
croganm
croganm16mo ago
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:
const content = document.querySelectorAll(".content");

content.forEach(el => {
const computedStyle = getComputedStyle(el);

const elementPadding = parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);

const span = el.querySelector("span")
const spanWidth = span.getBoundingClientRect().width
el.style.width = `${spanWidth+elementPadding}px`
})
const content = document.querySelectorAll(".content");

content.forEach(el => {
const computedStyle = getComputedStyle(el);

const elementPadding = parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);

const span = el.querySelector("span")
const spanWidth = span.getBoundingClientRect().width
el.style.width = `${spanWidth+elementPadding}px`
})
And for your HTML
<div class="box">
<div class="content">
<span>Funds without a sustainability scope</span>
</div>
</div>
<div class="box">
<div class="content">
<span>Funds without a sustainability scope</span>
</div>
</div>
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
croganm
croganm16mo ago
croganm
croganm16mo ago
This is a terrible solution if the text changes or anything though You'd need to adjust the javascript to suit your purposes
Kate
Kate16mo ago
Thanks croganm :) Pity there isn't an obvious CSS only solution...
croganm
croganm16mo ago
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!
Want results from more Discord servers?
Add your server