Chrome中text-overflow:ellipsis生效时文本输入框仍可横向滚动的解决办法

要实现固定宽度300px、未聚焦时省略号截断、聚焦时可横向滚动的输入框，可通过以下方式修复Chrome的特有问题：

核心解决方案 #

利用CSS伪类精准控制输入框在聚焦/未聚焦状态下的overflow属性，同时配合white-space: nowrap（这是text-overflow: ellipsis生效的必要前提）：

• 未聚焦时：设置overflow: hidden，彻底禁止滚动，确保省略号正常显示
• 聚焦时：设置overflow-x: auto，允许横向滚动查看全部内容

完整代码示例 #

<form>
  <input
    type="text"
    style="
      width: 300px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    "
    value="asdfasdflkajsdlfjalsdfkaslkdfjalskdjflkasjdflkjaldsfkjalsdfjasdfasfasdf"
  />
</form>

<style>
  input:focus {
    overflow-x: auto;
    /* 可选：自定义聚焦样式，按需调整 */
    outline: 1px solid #0071e3;
  }
</style>

原理说明 #

Chrome在未聚焦状态下，即使设置了text-overflow: ellipsis，输入框的默认overflow行为仍可能允许横向滚动（表现为滚动后显示空白）。通过:focus伪类覆盖未聚焦时的overflow: hidden，既能满足未聚焦时的截断需求，又能在聚焦时恢复滚动功能；同时white-space: nowrap确保文本不会换行，让省略号和滚动行为都能正常工作。

该方案在Chrome 108+、Firefox、Safari中均能正常兼容，不会出现不符合需求的异常行为。

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