Question

我想要在div标签中写入的字符串字符的X和Y坐标，或者在中断的位置或者在小尺寸div标签中打破哪个字符。

我有<div>元素contenteditable属性，如<textarea>，css属性自动换行：break word。我想知道，从哪个字母文本转到下一行（没有新行，用于常量文本）。那么我可以得到字母y位置改变的字母吗？这样我就可以在那个字母后添加新行来用画布绘制文本。

Answer 1

如果您使用的字体对于每个字母都有一个共同的宽度和高度，请说明{16}的monospace（我刚刚计算过），如果将其与{{1}的宽度进行比较}，你可以使用这样的东西：

div

HTML:

<div id="input" contenteditable="true" style="width: 100px; height: 100px; font-size: 16px; font-family: monospace; line-spacing: 0px; letter-spacing: 0px; border: 1px solid #bbbbbb">
  Some Text Some Text Some Text Some Text Some Text Some Text.
</div>

<小时/> 另外，请参阅 JSFiddle Example 应该工作，祝你好运。

Answer 2

在文本节点的子字符串上使用range对象来收集boundingRects： https://developer.mozilla.org/en-US/docs/Web/API/Range/getBoundingClientRect

得到用div写的字符串字符的X和Y位置或者它是中断的位置

2 个答案: