Javascript 获取在div中写入的字符串的X和Y位置或其中断位置

我想要写在div标记中的字符串的X和Y坐标，或者在小尺寸div标记中它被打断的位置，或者从哪个字符被打断

---

我有一个

元素，它具有

contenteditable

属性，就像

具有css属性word wrap:break word一样。我想知道，从哪个字母文本转到下一行（对于常量文本，没有新行）。我能得到字母y位置改变的位置吗？因此，我可以在该字母后添加新行，以便使用画布绘制文本。

如果您使用的字体每个字母的宽度和高度都相同，比如说16px的

单空格

（我刚刚计算过），如果您将其与

div

的宽度进行比较，您可以使用如下内容：

---

HTML：
一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字。

---

JavaScript:
var输入=document.getElementById（“输入”）；
函数getXandY（索引）{
变量x=0，y=0；
var length=input.innerHTML.substring（0，index）.length；//获取字符串开头和所选索引之间的长度
x=（长度%10）；//获取第行的字母索引
如果（长度<100）{
y=数学楼层（长度/10）；
}否则{
y=长度/100；
}
//仅适用于小于1000个字符的字符；
返回“X:+X+”Y:+Y；
}
警报（getXandY（23））；

---

另外，请参见此

---

应该可以，祝你好运。

在文本节点的子字符串上使用范围对象来收集边界矩形：

---

你能举个例子吗？？你到底想要什么和你的愿望结果我不知道一个直接的解决办法，但。。。如果您使用单声道空格字体，您可以通过整个字符串中的字符索引获得坐标，因为单声道字体对于每个字母都具有相同的宽度和高度。

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>

JavaScript:

var input = document.getElementById("input");

function getXandY(index) {
    var x = 0, y = 0;

    var length = input.innerHTML.substring(0, index).length; // Get length between beginning of string and chosen index

    x = (length % 10); // Get letter index on line

    if(length < 100) {
        y = Math.floor(length / 10);  
    } else {
        y = length / 100;   
    }

    // Only works for chars less than 1000;

    return "X: " + x + " Y: " + y;
}

alert(getXandY(23));