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

Question

I want X and Y coordinates of string character written in div tag or position where it is break or from which character it is break in small size div tag.

I have a <div> element with a contenteditable attribute like <textarea> with css attribute word-wrap:break word. I want to know , from which letter text goes to next line (without new line , for constant text). So can i get the letter where y position of the letter is changed ? so that i can add new line after that letter to draw text with canvas.

Answer 1

If you are using a font that has a common width and height for each letter, say monospace at 16px (which I just worked to calculate), if you compare this to the width of your div , you may use something like this:

---

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));

---

Also, see this JSFiddle Example .
Should work, good luck.

Answer 2

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