如何让一个元素用CSS填充多行段落最后一行的剩余空间？

Question

关于如何用 CSS 填充空间有很多问题，this 是我认为的主要问题。如今，flexbox 提供了一个很棒且简单的解决方案。但是，它不允许您填充多行段落的剩余空间。明确地说，这就是我想要的：

Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Quisque vel scelerisque purus, et ultricies sapien。 Donec mi augue, pulvinar at mauris sat amet, ultricies molestie nisi。 Cras et nisi lobortis。 从这里填写到最后 ->

我找到了one question asking the same，但是它使用 CSS content 规则填充空间，我需要能够用一个元素（特别是 <input>，如果这很重要的话）填充它。

<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>

我目前的解决方案是在文本末尾和<input> 之间添加一个跨度，测量它的位置，然后手动设置宽度，但这需要我监听浏览器调整大小事件并重新计算宽度。如果可以完全在 CSS 中做到这一点，那就太好了。如果必须添加额外的元素，那很好。

Answer 1

将每个单词包装在span 中也可以——甚至可能是一种更好的方法。有很多方法可以进行包装，这里是一个纯 javascript 的方法。

本质上，由于每个单词都是一个 span，flexbox 可以确定最后一个单词末尾的剩余间距。只需将flex-grow: 1 添加到input 即可填充剩余空间。

请注意，您需要将padding-right 添加到每个跨度以在单词之间添加一个空格。

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>