当在可编辑区域内单击以获得更大的行高时,macOS 上的 Chrome 和 Linux 上的 Chromium 不会合理地定位插入符号。
在此示例中,我们为 line-height
设置了一个值对于 <span>
元素。由于其他应用程序要求,主要是使用 Quill.js,因此无法将其关闭并从父元素继承。富文本编辑器。可能有多个 <span>
每行具有不同的字体大小,但没有嵌套元素。
p {
display: inline-block;
margin: 0;
background: lightgrey;
}
span {
line-height: 2.5;
font-size: 50px;
background: lightblue;
}
span.small {
font-size: 25px;
}
<p contenteditable><span>some </span><span class="small">text</span><br/><span>some text</span></p>
在 Firefox 中,如果您单击灰色区域(标记 <p>
元素),插入符号将始终位于最近的字符处。如果您在行之间单击,插入符号也会合理定位。
在 Chrome 中,仅当您在蓝色区域内单击(标记元素)时,插入符号才会定位到最近的字符。在灰色区域,插入符号结束于下一行的开头,或者如果您在最后一个跨度下方单击,则结束于最后一行。
如何用 Chrome 复制 Firefox 的行为?
注意:给跨度一个display: inline-block
推荐here没有解决问题。
最佳答案
如您所知,它与 Chrome 及其处理行高的方式有关。
尽管如此,我已经编写了一个似乎在 Linux(Chrome、Firefox)和 Windows(Chrome、Firefox、Edge)上运行良好的解决方法。
使用 vertical-align: text-bottom
,除第一行外,所有行似乎都按预期工作。所以想法是添加一个换行符(然后用 font-size: 0
取消它)
p::before {
content: "\A";
white-space: pre;
display: inline;
}
p::first-line {
font-size: 0px;
}
这在 Chrome(Linux 和 Windows)上工作得很好,但是在 Firefox 上我没能取消额外的换行符。因此,由于它最初运行良好,所以我使用了 firefox-only 规则来隐藏额外的换行符。
因此,我们的解决方法适用于 Chrome 和 Firefox(Windows 和 Linux)但是Edge 在 vertical-align
方面遇到了一些困难,所以(再一次)我使用了一个 ms only 规则来unset
vertical-align
。
结果(适用于 Chrome Windows/Linux、Firefox Windows/Linux、Edge Windows)
p {
display: inline-block;
margin: 0;
background: lightgrey;
}
span {
line-height: 2.5;
font-size: 30px;
background: lightblue;
vertical-align: text-bottom;
}
p::before {
content: "\A";
white-space: pre;
display: inline;
}
p::first-line {
font-size: 0px;
}
/* Firefox only */
@-moz-document url-prefix() {
p::before {
display: none;
}
}
/* Edge only */
@supports (-ms-ime-align:auto) {
span {
vertical-align: unset;
}
}
<p contenteditable><span>some text</span><br/><span>some text</span></p>
更新
在更新的测试用例中,每行有多种字体大小,您将需要跳过 vertical-align: bottom|text-bottom
并妥协于将额外空间“分配”给下面一行(仅在 Chrome - Linux 中)。
请注意,为了在所有行之间具有一致的行为,您仍然需要在第一行使用上述“hack”。
看看这个codepen用于更新的测试用例。
关于html - 在 Chrome 中将插入符定位在具有大行高的 contenteditable 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56837287/