0

There have been many questions about how to fill space with CSS, this being the main one I think. These days flexbox provides a great and easy solution. However, it doesn't let you fill the remaining space of a multi-line paragraph. To be clear, this what I want:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel scelerisque purus, et ultricies sapien. Donec mi augue, pulvinar at mauris sit amet, ultricies molestie nisi. Cras et nisi lobortis. FILL FROM HERE TO THE END ->

I found one question asking the same, however it fills space with a CSS content rule, and I need to be able to fill it with an element (specifically an <input>, if that matters.)

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque vel scelerisque purus, et ultricies sapien. Donec mi
augue, pulvinar at mauris sit amet, ultricies molestie nisi.
Cras et nisi lobortis.
<input type="text">
</p>

My current solution is to add a span between the end of the text and the <input>, measure it's position, and manually set a width, however that requires me to listen for browser resize events and recalculate the width. If it was possible to do this entirely within CSS, that would be great. If extra elements have to be added that's fine.

curiousdannii
  • 1,658
  • 1
  • 25
  • 40
  • Can you add a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example)? – sallf Jan 12 '22 at 23:56
  • 1
    @sallf Do you mean like this, adding the HTML that I would like to be styled? (Though if extra elements have to be added that's fine.) – curiousdannii Jan 13 '22 at 00:02
  • I don't think this is possible with just css. There might be a hacky way to do it if you wrap each character in the paragraph in a ``. Would you be interested in an answer like that? – sallf Jan 13 '22 at 00:54
  • I'm open to anything, though that's probably a bit too hacky. I thought of something like that before, using flexbox but with words instead of characters, but I'm not sure I ever got it actually working. – curiousdannii Jan 13 '22 at 01:09

1 Answers1

1

Wrapping each word in a span works too -- might even be a slightly better approach. There are a lot of ways to do the wrap, here's a purely javascript one.

Essentially, since each word is a span, flexbox can determine the leftover spacing at the end of the last word. Simply add flex-grow: 1 to the input so that it fills the remaining space.

Note that you'll need to add padding-right to each span to add a space between the words.

const p = document.getElementById("p");
const str = p.innerText.replace(/\S+/g, "<span>$&</span>");

p.innerHTML = str;
p.innerHTML += '<input class="input" type="text" />';
p {
  display: flex;
  flex-wrap: wrap;
}

p span {
  padding-right: 3px; /* space size */
}

input {
  width: 0;
  flex-grow: 1;
}
<p id="p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel scelerisque purus, et ultricies sapien. Donec mi augue, pulvinar at mauris sit amet, ultricies molestie nisi. Cras et nisi lobortis.
</p>
sallf
  • 2,583
  • 3
  • 19
  • 24
  • If it splits but includes the spaces, then the padding wouldn't be necessary, right? – curiousdannii Jan 13 '22 at 01:55
  • I am already adding the text via JS, so this counts as CSS-only for me. Thank you so much! – curiousdannii Jan 13 '22 at 01:56
  • I think flexbox would get rid of the empty space, because it doesn't see a blank space as content. Not 100% sure though. If that is the case, instead of `padding-right` you could use `p span { min-width: 3px }` to essentially the same effect. This is assuming you'd put each space into its own span ` `...which you actually wouldn't even need the space. – sallf Jan 13 '22 at 01:59
  • I'm already using `white-space: pre-wrap;` so the space collapsing might not be an issue? I'll test this and find something that works, but the general idea looks perfect for me! – curiousdannii Jan 13 '22 at 02:00