input输入框placeholder提示文本最后一个字符不显示如何解决

架构老林

2026-9-2

问题根因

input输入框placeholder提示文本末尾字符缺失，核心原因是样式中设置了过大的右内边距padding-right: 250px，直接挤压了输入框的内容显示区域，文本没有足够空间完成完整渲染，最后一个字符就被裁切隐藏。
如果删除所有CSS后问题仍存在，优先检查浏览器缓存、样式覆盖规则是否真正生效，只要移除这个异常偏大的右内边距，placeholder就能完整显示。

问题复现代码

CSS样式

.google-search {
  font-family: 'Arial';
  padding-left: 12px;
  padding-right: 250px; /* 引发问题的异常样式 */
  padding-top: 6px;
  padding-bottom: 6px;
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  border-radius: 20px;
}

HTML结构

<input type="text" placeholder="Search Google or type a URL" class="google-search">

修复方案

根据实际布局需求，将右内边距调整为合理值即可，也可以给输入框设置明确宽度适配内边距尺寸，参考修复代码：

.google-search {
  font-family: 'Arial';
  padding-left: 12px;
  /* 将过大的250px右内边距调整为匹配布局的合理值 */
  padding-right: 12px;
  padding-top: 6px;
  padding-bottom: 6px;
  width: 280px; /* 可按需调整宽度，保证提示文本完整显示 */
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  border-radius: 20px;
}