如何获取多行span元素的起始X坐标？

当span元素因内容过长换行时，getBoundingClientRect().left返回的是当前行的左偏移，而非元素第一行的起始X坐标。以下是两种可靠的解决方法：

方法一：使用Range API（通用方案） #

利用Range选中span的第一个字符，该Range对应的矩形区域就是第一行起始位置的坐标，不受换行影响：

// target 为目标span元素
const range = document.createRange();
range.setStart(target, 0);
range.setEnd(target, 1); // 选中span的第一个字符
const firstLineRect = range.getBoundingClientRect();
const firstLineLeft = firstLineRect.left; // 第一行的起始X坐标

这个方法适用于所有排版场景，无论span换多少行，都能准确获取第一行的起始位置。

方法二：基于父元素计算（简单排版场景） #

如果span所在的父元素是块级元素，且没有文本缩进、特殊内边距等复杂排版，可以通过父元素的位置结合span的偏移量计算：

const parent = target.parentElement;
const parentRect = parent.getBoundingClientRect();
// parent.clientLeft 是父元素的边框宽度（若有）
const firstLineLeft = parentRect.left + parent.clientLeft + target.offsetLeft;

此方法局限性较大，仅适用于span第一行与父元素左边界对齐的简单场景。

内容的提问来源于stack exchange，提问作者Alexander WJ