Kevin Powell - Community•2y ago

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

Kate

CodePen

...

14 Replies

Joao•2y ago

You can try to add the hyphens: auto; property to break words when they reach the end of the available width.

KateOP•2y ago

Hi, thanks for the reply :) Unfortunately, breaking words isn't an option either :/ The client is very picky lol

Joao•2y 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.

KateOP•2y 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•2y 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•2y ago

lol if you want to be a real maniac, you could do text-align: justify;

croganm•2y ago

croganm•2y 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?

KateOP•2y 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•2y 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•2y ago

croganm•2y ago

This is a terrible solution if the text changes or anything though You'd need to adjust the javascript to suit your purposes

KateOP•2y ago

Thanks croganm :) Pity there isn't an obvious CSS only solution...

croganm•2y 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!

Gaming

Programming

Whitespace when line-wrapping