如何消除Firefox浏览器下省略号与文本间的多余间距

该问题的触发逻辑为：Firefox在计算input文本截断位置时，会为未完全渲染的下一个字符预留宽度空间，该计算逻辑和Chrome、Edge、Safari等浏览器存在差异，最终表现为可见文本末尾与省略号之间出现多余空白，逐次将input宽度以1px为单位递增调整时，可明显观察到该预留空间的变化。

以下为可直接落地的修复方案，优先推荐使用方案1：

• 方案1：右侧1px内边距修复（无副作用，兼容性最佳）
  给input增加1px右侧内边距，抵消Firefox预留的字符宽度即可，同时设置box-sizing: border-box避免input总宽度被撑大，完全不影响原生输入交互和省略逻辑：

  input {
    width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 修复代码 */
    box-sizing: border-box;
    padding-right: 1px;
  }
  

  如果业务需要适配RTL（从右到左）的多语言场景，可将padding-right替换为逻辑属性padding-inline-end: 1px，内边距会自动根据文本排版方向适配位置。

• 方案2：自定义省略号字符绕开默认渲染
  直接自定义text-overflow的省略号字符，绕开Firefox默认ellipsis值的渲染逻辑，代码改动量极小：

  input {
    width: 110px;
    white-space: nowrap;
    overflow: hidden;
    /* 替换默认省略号渲染 */
    text-overflow: '…';
  }
  

  注意：该方案在Firefox 80以下版本需要添加-moz-text-overflow: '…'前缀适配，新版本已支持标准写法；缺点是多语言场景下需要根据地区语言的省略号规范单独调整。

• 方案3：外层容器模拟截断效果（极端场景兼容）
  如果前两种方案都无法适配业务需求，可通过外层容器实现截断省略，放弃input原生的截断逻辑，该方案会改动DOM结构，非必要不推荐：

  <div class="input-container">
    <input type="text" value="Lorem ipsum dolor sit amet">
  </div>
  

  .input-container {
    width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .input-container input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
  }
  

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