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

时间:2018-02-01 09:47:13

标签: css mobile-safari contenteditable

我有一个内容可编辑范围的问题,当我删除现有字符然后尝试插入新字符时,它将切断safari mobile上的第一个字符的一部分(发生在ipads和iphone上)

* {
  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然后输入一些文本,则第一个字符始终被截断。有谁知道如何解决这个问题。

1 个答案:

答案 0 :(得分:3)

我非常确定您的java.lang.NullPointerException at org.apache.zeppelin.spark.SparkInterpreter.open(SparkInterpreter.java:821) at org.apache.zeppelin.interpreter.LazyOpenInterpreter.open(LazyOpenInterpreter.java:69) at org.apache.zeppelin.interpreter.remote.RemoteInterpreterServer$InterpretJob.jobRun(RemoteInterpreterServer.java:612) at org.apache.zeppelin.scheduler.Job.run(Job.java:186) at org.apache.zeppelin.scheduler.FIFOScheduler$1.run(FIFOScheduler.java:139) at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:511) at java.util.concurrent.FutureTask.run(FutureTask.java:266) at java.util.concurrent.ScheduledThreadPoolExecutor$ScheduledFutureTask.access$201(ScheduledThreadPoolExecutor.java:180) at java.util.concurrent.ScheduledThreadPoolExecutor$ScheduledFutureTask.run(ScheduledThreadPoolExecutor.java:293) at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149) at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624) at java.lang.Thread.run(Thread.java:748) 会与quantity-span重叠。由于您的product-checkbox__quantity-unitquantity-span,因此部分文字无法显示。

overflow: hidden更改为margin-right: .5em以查看是否仍然发生