我有文字在<p> tag:

<p>Hello world... and goodbye mind A B!</p>

如何增加文本可选择的区域？我知道我可以增加font-size这会增加可选择的区域，但是有更好的方法吗？

为了澄清这个问题。例如，在移动屏幕上，我发现很难突出显示只有一个字母的单词，例如i，但是如果命中检测的区域范围更广，那么选择它就会容易得多。

怎么做？一个令人费解的谜题。

赏金信息

寻找可行的跨浏览器解决方案。请仔细阅读问题和评论在发布答案之前以避免混淆。用户 @mmm 发布了一个非常接近的问题，但在他的方法中，而<p>标签具有更广泛的点击检测（完美！），它会在点击时自动选择。我需要用户与<p>标签就像我们基于普通文本所做的那样<p>标签...但是具有更大的命中检测器。

EDIT

进一步澄清。举个例子，这个问题的评论选择区域是如此之大：

您可以在下面找到此评论。将光标悬停在其上，直到光标变为cursor:text。这是默认选择区域。

但我的目标是将其扩展到更大的区域， 像这样：

根据我的测试，它可以在 iphone、ff 和 chrome 上运行 - 如果有人可以在 Android 上进行测试，我将不胜感激！

边框显然可以删除。

此代码使用此答案中的代码（SelectText() 函数的一部分）：选择元素中的文本（类似于用鼠标突出显示） https://stackoverflow.com/a/987376/3993662

Fiddle https://jsfiddle.net/jknnou4r/5/

Code:

function extendSelection() {
    var extendBy = arguments.length <= 0 || arguments[0] === undefined ? 15 : arguments[0];

    var extended = document.getElementsByClassName('extendedSelection');
    [].slice.call(extended).forEach(function (v) {
        var bounds = v.getBoundingClientRect();
        var x = bounds.left;
        var r = textWidth(v.innerHTML, ''+ css(v, 'font-weight') +' ' + css(v, 'font-size') + ' ' + css(v, 'font-family') );
        var y = bounds.top;
        var w = bounds.width;
        var h = bounds.height;
        var element = document.createElement('div');
        element.style.position = 'absolute';
        element.style.height = h + extendBy + 'px';
        element.style.width = r + extendBy + 'px';
        element.style.left = x - extendBy / 2 + 'px';
        element.style.top = y - extendBy / 2 + 'px';
        element.style.border = '1px dotted black';
        document.body.appendChild(element);
        element.addEventListener('click', function (e) {
            SelectText(v);
        });
        element.addEventListener('touchend', function (e) {
            SelectText(v);
        });
    });
}

function css(element, property) {
    return window.getComputedStyle(element, null).getPropertyValue(property);
}

function textWidth(text, font) {
    var el = textWidth.canvas || (textWidth.canvas = document.createElement("canvas"));
    var draw = el.getContext("2d");
    draw.font = font;
    var m = draw.measureText(text);
    return m.width;
};

function SelectText(element) {
    var doc = document,
        text = element,
        range,
        selection;
    if (doc.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
        selection.setSelectionRange(0, element.value.length)
    }
}

extendSelection();