How to determine the position of the cursor when clicking on the text?

Question

css

Good day to all.
Actually a question.
There is a label. (The usual div in which the text is displayed as a line).
When I click on this label, I need to understand where exactly I clicked. (according to the principle of placing the cursor in a text field) Need to understand between which letters the click occurred?
And the second question. what is the best way to do something like this.
There is the label mentioned above. visually it fits 50 characters. all other characters are hidden to the right of its borders. How to make the text if it contains more than 50 characters, goes to the left. Tobish the beginning was hidden, but the end was visible.

Answer 1

All mouse events provide the current cursor coordinates in two ways: relative to the window and relative to the document.
The clientX/clientY property pair contains the coordinates of the cursor relative to the current window.
In this case, for example, if your window is 500x500 in size, and the mouse is in the center, then both clientX and clientY will be equal to 250.
You can scroll the page as you like, but if you do not move the mouse, then the coordinates of the clientX/clientY cursor will not change, because that they are relative to the window, not the document.
Hover over the input field to see clientX/clientY:
But I'm at a loss about overflow ...