Chrome line-wrapping deadzone


You have a piece of text with no spaces that gets linewrapped when hitting a boundary in chrome, there is a selection deadzone. That is to say that if you clicked between the whitespace and the last character the numerical equivalent can be achieved by clicking before the first character on the next line.

image image

This presents an issue for me because getting browser range bounding rects are not accurate when its on the above line. So all my math isn’t working out there.

I was wondering if there is a specific css tweak, if I should just forget about it and do it more mechanically instead of visual testing, if the difference is being able to use caret bounding rects or not.


I haven’t found a non-invasive way to remove such a dead zone. But I believe on most browsers calling getClientRects and inspecting the multiple rectangles returned (as opposed to getBoundingClientRect) can give you enough information to figure out that you’re looking at a line break.


Thanks for the fast reply, I honestly wasn’t expecting this to get any easier based on how it worked before asking, I figured I would ask anyway. The line rects probably won’t work since what I need is to know how close the caret is to the top of the element, specifically before it hits a boundary that requires finding a new valid selection another element. Unfortunately I have to handle most of this for one our elements due to the nature of how it works.