使链接 div 中的文本可选

Question

我正在创建一个网页，并有一个要链接的部分，在此部分内，虽然我有一些文本希望允许用户从中复制和粘贴（即他们需要能够突出显示它）。因为文本在链接的 div 内，但我无法选择它，如何使文本可选？

这是我的代码...

<a href="http://google.com">
    <div class="container"> 
        <h2>Heading</h2>
        <p class="selectable-text">Text that can be highlighted here</p>
        <p>Other Text</p>
    </div>
</a>

我试过把它放在 CSS 中，但这只是改变了光标，实际上并没有使文本可选择...

.selectable-text{
    cursor:text;
}

提前感谢您的帮助。

Answer 1

a-Elements 不允许在其中包含块元素。因此，您不能以这种方式构建布局。仅将标题设为链接怎么样？这很好，您可以轻松选择其他文本：

<div class="container"> 
    <h2><a href="http://example.com">Heading</a></h2>
    <p>Text that can be highlighted here</p>
    <p>Other Text</p>
</div>

为了使整个容器可点击，您可以将 Javascript 事件侦听器应用于所有容器。如果您已经在使用 jQuery，这可以很容易地完成：

$('.container').each(function(){
    $(this).on('click', function(){
        location.href = $(this).find('a').attr('href');
    });
}).addClass('link');

此链接与“真实”链接的区别在于它不可拖动而是可选择的。无论如何，您可以单击它，它会将您定位到您想去的地方。它还将应用一个类.link，您可以在样式表中使用它来将指针设置为光标。

对于禁用了 javascript 的人，标题中仍然会有一个链接，因此您的页面在任何情况下都可以使用。