移动端Safari中contenteditable span首字符截断问题求助

嘿，这个问题我之前做电商项目时也踩过坑！Safari移动端对inline类型的contenteditable元素确实有奇怪的渲染bug，尤其是结合flex布局和overflow:hidden的时候，删除原有内容后输入第一个字符很容易被截断。

问题根源 #

本质上是Safari在处理inline元素的contenteditable文本更新时，没有正确计算元素的初始渲染宽度。当你删除原有字符后，元素宽度被收缩到几乎为0，输入第一个字符时浏览器没能及时重新计算宽度，导致字符被容器截断。

修复方案（亲测有效） #

这里给你几个可行的解决办法，按推荐程度排序：

1. 将contenteditable的span改为inline-block类型

这是最直接的修复方式，让浏览器以块级元素的规则计算宽度，避免inline元素的渲染异常：

.product-checkbox__quantity-holder .quantity-span {
  outline: none;
  flex-shrink: 1;
  margin-right: .5em;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  /* 关键修改：将inline改为inline-block */
  display: inline-block;
  /* 可选：添加min-width确保首个字符有足够显示空间 */
  min-width: 1.2em;
}

2. 调整flex容器的overflow属性（谨慎使用）

如果不想修改元素display类型，可以尝试移除flex容器的overflow: hidden，或者改为overflow-x: visible，但这可能影响你原本的布局效果，需要根据实际情况调整：

.product-checkbox__quantity-holder {
  margin-top: .5rem;
  display: flex;
  flex-direction: row;
  border: 1px solid #c6c6c6;
  background: #fff;
  border-radius: 5px;
  padding: 1rem 1.25rem;
  width: 100%;
  /* 修改overflow属性 */
  overflow-x: visible;
  position: relative;
}

3. 替换为input元素（终极方案）

如果contenteditable的需求可以用input替代，那这是最稳妥的选择——毕竟input是原生表单控件，在各浏览器的兼容性都更好：

<span class="product-checkbox__quantity-holder">
  <input class="quantity-input" type="text" value="..." />
</span>

对应的CSS可以调整为适配input的样式，让它看起来和原来的span一致：

.product-checkbox__quantity-holder .quantity-input {
  outline: none;
  border: none;
  background: transparent;
  flex-shrink: 1;
  margin-right: .5em;
  max-width: 80%;
  white-space: nowrap;
}

验证效果 #

修改后在iPad/iPhone的Safari上测试：删除原有字符后输入第一个字符，应该能正常显示，不会再出现截断问题。

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