Question

我在一个网站上工作，该网站收集着名的报价。引用的文本是做其他事情的链接[...]但我也想要，用户可以选择并复制引用的文本。

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

是否可以在CSS中覆盖它并使用户可以选择文本？

Answer 1

在Firefox中，您可以按Alt键选择部分超链接，然后像往常一样用鼠标选择。因此，一种选择是使用jQuery实现类似的操作：如果按下Alt键（或您指定的键）并且鼠标指针位于链接上，则禁用链接。释放密钥后，启用该链接。当然，您必须告诉用户如何进行选择。

Answer 2

这不是CSS的工作，因为这是功能，而不是渲染。这是一个棘手的问题，因为点击链接应该意味着跟随链接，打破这个会产生一个主要的可用性问题。

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

Answer 3

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

jQuery的：

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

HTML：

<span data-link="link.html" class="q">text here</span>

CSS（给它“手”光标）

.q {
  cursor: pointer;
}

Demo

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

Answer 4

可以，

第1步：

创建可拖动以锚定标签的属性。

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

第2步：

使光标样式为自动且用户选择的内容必须为文本或全部

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

}

Answer 5

不，但你不应该在一个链接中有大量的文本 - 理想情况下，链接应该只是一个或两个单词，而不是整个段落。

Answer 6

如果没有看到您的网站，我无法分辨，但我怀疑问题是您的链接标记包含的不仅仅是报价。

如果链接显示为“是或否 - 这是问题”，则选择它应该与选择任何其他问题相同。如果链接是“这是一个很好的引用：'成为或不成为 - 这是问题。点击这里做其他事情！”然后他们将无法选择中间的文本，这是他们想要的。

确保您的链接文字仅他们想要选择的文字，并将其他任何内容放在标签之外，您就可以了。

Answer 7

这是我提出的一种方法。

它使用<span>而不是<a>标记，但行为就像一个带有一些奖励的常规链接。翻转文本时，会有500毫秒的超时，这会将光标更改为文本选择光标。单击并拖动文本不会触发单击操作，但是双击文本（以选择整个单词）仍会触发单击事件。这可以改进，但效果很好，可以用于生产。

使这更好的另一种可能性是，当超时执行时，它还会在按钮的右上角显示一个小的剪贴板图标，他们可以单击该图标将文本复制到剪贴板。当你按下.mouseout()时，它会隐藏这个剪贴板图标。

此外，另一个功能可能是当鼠标离开按钮时清除文本选择。（Clear Text Selection with JavaScript）

<强> HTML

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

<强> CSS

.link {
  font: 16px/0 Tahoma, sans-serif;
  padding: 15px 30px;
  border: 1px solid #0079be;
  border-radius: 4px;
  color: #0079be;
  cursor: pointer;
}
.link:hover {
  color: #fff;
  background: #0079be;
}
.link.selectable > span {
  display: inline-block;
}
.link.selectable.selecting > span {
  cursor: text;
}

<强>的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');
    }
  }
);

https://jsfiddle.net/gavin310/6efdyq4h/

Answer 8

假设您有一个“框”，例如号召性用语链接，其主要目的和用途是将用户带到新页面。同样重要的是，一种“选择”文本的某些（例如地址，电话号码，或者您的情况下为-歌词）的方法也很有效。 / p>

警告是“可选”文本本身，不可单击。但是话又说回来，对于那些有意选择文本的人来说，这将不是问题。对于其他想要点击该链接的人，他们必须在可选文本边界之外单击一点。

<!-- 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>

链接到CodePen：

https://codepen.io/mjoanisse/pen/YMNaae

使用CSS可以选择链接中的文本

8 个答案: