如何实现句子中行内输入框内容过长时推动后续文本？

核心思路 #

要达成需求，关键是让输入框宽度随内容自适应，同时与前后文本保持在同一行流中，输入内容变长时自然撑开并推动后方文本。

原生HTML+CSS实现方案 #

无需依赖Webflow的复杂配置，原生代码即可实现：

1. HTML结构 #

将输入框直接嵌入句子文本中：

<p>
  我希望等待 <input type="text" placeholder="0" class="inline-input"> minutes，然后继续操作。
</p>

2. CSS样式 #

通过样式重置让输入框适配行内文本流：

.inline-input {
  /* 让输入框成为行内块元素，融入文本流 */
  display: inline-block;
  /* 宽度随内容自适应 */
  width: fit-content;
  /* 最小宽度保证占位符完整显示 */
  min-width: 2em;
  /* 移除默认边框，改成下划线更贴合文本风格 */
  border: none;
  border-bottom: 1px solid #ccc;
  /* 取消默认内外边距，与文本对齐 */
  padding: 0;
  margin: 0;
  /* 继承父元素字体样式，保证视觉统一 */
  font-size: inherit;
  font-family: inherit;
  outline: none;
}

3. JS精准适配（可选） #

如果需要更精准的宽度计算（比如处理不同字符宽度差异），可以用JS实时匹配内容宽度：

const input = document.querySelector('.inline-input');
// 创建隐藏容器用于计算文本宽度
const hiddenCalc = document.createElement('span');
hiddenCalc.style.cssText = 'visibility:hidden; position:absolute; white-space:nowrap;';
// 同步输入框的字体样式
hiddenCalc.style.fontSize = getComputedStyle(input).fontSize;
hiddenCalc.style.fontFamily = getComputedStyle(input).fontFamily;
document.body.appendChild(hiddenCalc);

// 实时更新宽度
input.addEventListener('input', () => {
  hiddenCalc.textContent = input.value || input.placeholder;
  input.style.width = `${hiddenCalc.offsetWidth}px`;
});

// 初始化宽度
hiddenCalc.textContent = input.placeholder;
input.style.width = `${hiddenCalc.offsetWidth}px`;

Webflow适配方法 #

若要在Webflow中落地：

• 将句子文本与输入框放入同一个行内容器（设置容器display为inline-flex或inline-block）
• 给输入框设置：
  • 宽度改为「自动」，取消固定值
  • 清除默认的padding和margin，确保与文本对齐
  • 字体样式选择「继承」，与周围文本保持一致
• 若Webflow自带的输入框样式有固定宽度限制，需在自定义代码面板中覆盖默认样式（使用上述CSS代码）

效果验证 #

• 初始状态下，输入框宽度适配占位符长度
• 输入内容时，输入框随内容长度自动撑开，后方的minutes文本会被自然向后推动
• 清空输入后，输入框恢复至占位符对应的宽度

内容的提问来源于stack exchange，提问作者Alfie