内容可编辑切断第一个字符

Question

我的内容可编辑范围有问题，当我删除现有字符然后尝试插入新字符时，它会在 safari mobile 上截掉部分第一个字符（发生在 ipad 和 iphones 上）

* {
  box-sizing: border-box;
}
.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: hidden;
  position: relative;
}
.product-checkbox__quantity-holder .quantity-span {
  outline: none;
  flex-shrink: 1;
  margin-right: .5em;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
}
.product-checkbox__quantity-unit {
  flex-grow: 1;
}

<span class="product-checkbox__quantity-holder">
  <span class="quantity-span" contenteditable="true" tabindex="1">0</span>
  <span class="product-checkbox__quantity-unit">Unit</span>
</span>

如果删除 0 然后输入一些文本，第一个字符总是被截断。请问有谁知道怎么解决吗

Answer 1

我很确定您的 quantity-span 会与您的 product-checkbox__quantity-unit 重叠。由于您的 quantity-span 有 overflow: hidden 部分文本将不可见。

将 margin-right: .5em 更改为 padding-right: .5em; 以查看它是否仍然发生

内容可编辑切断第一个字符

Content editable cuts off first character

css

mobile-safari

contenteditable