caretPositionFromPoint书名手动换行实例页面

关键CSS代码：

figcaption {
    white-space: pre-wrap;
}

HTML代码：

<figure>
    <img src="https://image.zhangxinxu.com/image/blog/202308/nonce-popover-cover.png">
    <figcaption>我是书名点我断句</figcaption>
</figure>

JS代码：

const figcaption = document.querySelector('figcaption');
const button = document.querySelector('button');

// 中断方法
figcaption.addEventListener('click', function (event) {
    const { clientX, clientY } = event;
    let range;
    let textNode;
    let offset;

    if (document.caretPositionFromPoint) {
        range = document.caretPositionFromPoint(clientX, clientY);
        textNode = range.offsetNode;
        offset = range.offset;
    } else if (document.caretRangeFromPoint) {
        // 使用非标准的老的API代替
        range = document.caretRangeFromPoint(clientX, clientY);
        textNode = range.startContainer;
        offset = range.startOffset;
    } else {
        return;
    }
    
    // 文本节点在当前偏移位置分隔，返回的是后面的节点
    const replacement = textNode.splitText(offset);
    const brNode = document.createTextNode('\n');
    replacement.before(brNode);
});

// 点击按钮还原
button.onclick = function () {
    figcaption.textContent = figcaption.textContent.replace(/\n/g, '');
};