这问题确实挺头疼的——CSS本身没法直接让placeholder文本根据容器宽度动态缩放字号，你试过的vw单位是基于视口宽度而非容器宽度，所以当容器尺寸和视口不成比例时就会失效；而100%只是继承输入框的默认字号，和容器宽度完全不挂钩。

下面给你两种可行的思路，优先推荐第一种结合JS+CSS的方案，能精准实现“适配宽度+最小字号”的需求：

方案一：JavaScript动态计算字号（推荐） #

核心思路是创建一个隐藏的测试元素，模拟placeholder的渲染效果，通过不断调整字号，让文本刚好能在容器内完整显示（不换行），同时不低于设定的最小字号。

完整代码示例 #

<div id="container" style="width: 50px">
  <input type='text' width='100%' placeholder='A placeholder which should be seen totaly'/>
</div>

<style>
input {
  width: 100%;
  box-sizing: border-box;
}

input::placeholder {
  font-size: var(--placeholder-font-size, 16px); /* 默认字号 */
  min-font-size: 12px; /* 自定义最小字号 */
  white-space: nowrap; /* 强制不换行，确保完整显示 */
  overflow: hidden;
}
</style>

<script>
function adjustPlaceholderFontSize() {
  const container = document.getElementById('container');
  const input = container.querySelector('input');
  const placeholderText = input.getAttribute('placeholder');
  
  // 创建隐藏的测试元素，模拟placeholder的渲染环境
  const testEl = document.createElement('span');
  testEl.textContent = placeholderText;
  testEl.style.position = 'absolute';
  testEl.style.visibility = 'hidden';
  testEl.style.whiteSpace = 'nowrap';
  testEl.style.fontFamily = getComputedStyle(input).fontFamily;
  const minFontSize = getComputedStyle(input, '::placeholder').minFontSize;
  testEl.style.fontSize = getComputedStyle(input).fontSize;
  
  document.body.appendChild(testEl);
  
  const containerWidth = container.offsetWidth;
  let currentFontSize = parseInt(testEl.style.fontSize);
  const minSize = parseInt(minFontSize);
  
  // 逐步缩小字号，直到文本宽度适配容器或达到最小字号
  while (testEl.offsetWidth > containerWidth && currentFontSize > minSize) {
    currentFontSize--;
    testEl.style.fontSize = `${currentFontSize}px`;
  }
  
  // 将计算好的字号赋值给CSS变量
  input.style.setProperty('--placeholder-font-size', `${currentFontSize}px`);
  document.body.removeChild(testEl);
}

// 初始化执行一次
adjustPlaceholderFontSize();

// 监听窗口大小变化（如果容器宽度随窗口改变）
window.addEventListener('resize', adjustPlaceholderFontSize);

// 监听容器样式变化（比如动态修改容器宽度）
const containerObserver = new MutationObserver(adjustPlaceholderFontSize);
containerObserver.observe(document.getElementById('container'), {
  attributes: true,
  attributeFilter: ['style']
});
</script>

原理说明 #

1. 用隐藏的<span>模拟placeholder的文本渲染，确保字体、换行规则和placeholder完全一致
2. 循环缩小字号，直到文本宽度不超过容器宽度，同时不低于设定的最小字号
3. 通过CSS变量--placeholder-font-size把计算结果应用到placeholder上
4. 添加监听事件，确保容器宽度变化时自动重新计算

方案二：纯CSS折衷方案（仅当允许换行时适用） #

如果你的场景可以接受placeholder文本换行显示，那么可以用纯CSS实现：

input::placeholder {
  font-size: 100%;
  word-wrap: break-word;
  min-font-size: 12px;
}

但这种方式没法保证文本“完全不换行”，只是让文本自动换行适配容器，适合对排版要求不那么严格的场景。

内容的提问来源于stack exchange，提问作者J.BizMai