Html 使用CSS选择链接中的文本

我在一个网站上工作，这个网站收集著名的名言。引用的文本是一个链接，可以执行其他操作[…]，但我也希望，用户可以选择并复制引用的文本

但在几乎所有浏览器中，用户都无法轻松选择链接中的文本

---

有没有可能在CSS中覆盖这一点，让用户可以选择文本？

没有，但是链接中不应该有大量的文本块-一个链接最好只有一两个单词，而不是整个段落。

你不能。但是，您可以使元素看起来像链接，但可以使用JS实际处理其中的“链接”部分

jQuery：

$(".q").click(function() {
    window.location.href=$(this).attr('data-link');
});

HTML:

---

我只保留引用文本（无链接），然后在末尾添加一个较小的链接以获取更多信息或其他信息。

这不是CSS的真正工作，因为这是功能性的，而不是渲染。这是一个困难的问题，因为点击一个链接就意味着跟随这个链接，而破坏这个链接将产生一个重大的可用性问题

---

最好的方法是避免制作报价链接，并单独使用链接。例如，引用下面的信用，或者信用中引用的资源的名称，将是一个自然链接。如果你想点击“做其他事情”，那么也许你应该使用与报价相关的按钮，而不是链接。

我不能不看到你的网站在运行，但我怀疑问题在于你的链接标签包含的不仅仅是报价

如果链接显示为“生存还是毁灭——这就是问题”，那么选择它应该与选择任何其他问题相同。如果链接是“这是一个很好的引用：是或不是”这是问题。点击这里做其他事情！“那么他们就不能选择中间的文本，这就是他们想要的。”p>

---

确保您的链接文本只是他们想要选择的文本，并将任何其他内容放在标记之外，这样您就没事了。

在Firefox中，您可以通过按

Alt

键选择部分超链接，然后像往常一样用鼠标进行选择。因此，一个选项是使用

jQuery

实现类似的功能：如果按下

Alt

键（或您指定的键），并且鼠标指针位于链接上方，则禁用链接。释放钥匙后，启用链接。

---

当然，您必须告诉用户如何进行选择。

我想出了一个方法

它使用

而不是

）

HTML

<span data-href="javascript:alert('This is the click action.');" class="link selectable">
  <span>info@mydomain.com</span>
</span>

JavaScript

$('.link.selectable > span').hover(
  function() {
    var selectableTimeout = setTimeout(
      function(elem) {
        $(elem).parent().addClass('selecting');
      },
      500, this
    );
    $(this).data('selectableTimeout', selectableTimeout);
  },
  function() {
    clearTimeout($(this).data('selectableTimeout'));
    $(this).parent().removeClass('selecting');
  }
);
$('.link.selectable').mousedown(
  function(e) {
    $(this).data('mouseX', e.pageX);
    $(this).data('mouseY', e.pageY);
  }
);
$('.link.selectable').mouseup(
  function(e) {
    var mouseX = $(this).data('mouseX');
    var mouseY = $(this).data('mouseY');
    if (mouseX && mouseY && mouseX === e.pageX && mouseY === e.pageY) {
      window.location.href = $(this).attr('data-href');
    }
  }
);

你可以

步骤1：

创建一个可拖动到锚定标记的属性

<a href="http://www.exaple.com" **draggable="false"**>Select Text From Here</a>

假设您有一个类似于“框”的调用操作链接，它的主要目的和用途是将用户带到一个新页面。同样重要的是，有一种方法可以“选择”一些文本（例如地址、电话号码，或者在你的情况下是歌词），因为下面的方法很有效

警告是，“可选”文本本身是不可点击的。但是，对于那些有意选择文本的人来说，这不会是一个问题。对于任何试图点击该链接的人来说，他们必须点击超出可选择文本边界的一点

<!-- See stylized version in CodePen link below -->
<div class="box-link">
  <a href="#" class="box-link__anchor"><span>Apple Park Visitor Centre</span></a>
  <span class="box-link__text">10600 North Tantau Avenue<br />Cupertino, CA 95014</span>
</div>


加利福尼亚州库珀蒂诺北坦托大道10600号，邮编95014

代码笔链接：

我想首先你需要弄清楚你认为这是如何工作的。如果点击链接没有带你去任何地方，你怎么能找到它？如果你不能点击文本，你将如何选择它？只有当你选择整个链接，或者从中间到一端时，这才有效。如果你在中间选择一个短语，它将触发Windows .LooStices，如果你使用JavaScript来实现普通文本上的链接功能，那么你就可以为屏幕阅读器或浏览器中禁用JavaScript的人创建一个主要的可访问性问题（按公司政策或出于安全原因）。罗迪：是的。正如我所说，我不会这样做，只是提供了一个潜在的解决方案。我认为OP希望允许他/她的用户选择报价的任何部分。显然，这也适用于Chrome。谢谢你的提示！这在某种程度上是可行的（允许您通过链接的一部分开始选择），但如果您在链接上方释放鼠标，则链接仍会跟随。
$('.link.selectable > span').hover(
  function() {
    var selectableTimeout = setTimeout(
      function(elem) {
        $(elem).parent().addClass('selecting');
      },
      500, this
    );
    $(this).data('selectableTimeout', selectableTimeout);
  },
  function() {
    clearTimeout($(this).data('selectableTimeout'));
    $(this).parent().removeClass('selecting');
  }
);
$('.link.selectable').mousedown(
  function(e) {
    $(this).data('mouseX', e.pageX);
    $(this).data('mouseY', e.pageY);
  }
);
$('.link.selectable').mouseup(
  function(e) {
    var mouseX = $(this).data('mouseX');
    var mouseY = $(this).data('mouseY');
    if (mouseX && mouseY && mouseX === e.pageX && mouseY === e.pageY) {
      window.location.href = $(this).attr('data-href');
    }
  }
);

<a href="http://www.exaple.com" **draggable="false"**>Select Text From Here</a>

a
{
    cursor: auto;
    -webkit-user-select: text;
    -moz-select: text;
    -ms-select: text;
    user-select: text;

}

<!-- See stylized version in CodePen link below -->
<div class="box-link">
  <a href="#" class="box-link__anchor"><span>Apple Park Visitor Centre</span></a>
  <span class="box-link__text">10600 North Tantau Avenue<br />Cupertino, CA 95014</span>
</div>