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

Question

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

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

我找到了，但是它用 CSS content 规则填充了 space，我需要能够用一个元素（特别是一个<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，以便它填充剩余的 space。

请注意，您需要向每个跨度添加 padding-right，以便在单词之间添加 space。

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>

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

How to make an element fill the remaining space of the last line of a multi-line paragraph with CSS?

html

css

width