3

Here's HTML:

<a href="http://www.google.com" class="item">Hello World!</a>

And this is CSS:

.item {
  display: block;
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: white;
}

As you can play from this fiddle: https://jsfiddle.net/hy5ugo96/

How can I enable text selection when dragging mouse within a white-box?

NOTE: please help me find a solution that works with <a> tag, do not use other tag but you can put any tag inside <a>.

tanapoln
  • 479
  • 6
  • 15
  • 4
    I think this is browser specific - eg for chrome, you need to hold the alt key down while you select the text – Pete Feb 07 '17 at 10:37
  • 1
    Start dragging mouse before white box... or do a white box and INSIDE a `` tag element – Maurizio Battaghini Feb 07 '17 at 10:38
  • there is a CSS property called `user-select`. However, it doesn't change the default click behaviour. I couldn't make it work as you want yet. – Syntac Feb 07 '17 at 10:39
  • @Pete Yes, Alt+Drag link content selection now works in Chrome and also always worked in Firefox. – myf Feb 07 '17 at 11:01
  • I don't think it can be done using CSS. you need to use jquery itself. Have you checked [https://clipboardjs.com](https://clipboardjs.com)? – Eugine Joseph Feb 07 '17 at 11:40
  • Or check this answer too.. There can be a treasure in it. [Click button copy to clipboard using jQuery](http://stackoverflow.com/questions/22581345/click-button-copy-to-clipboard-using-jquery#answer-30905277). – Eugine Joseph Feb 07 '17 at 11:42
  • One simple solution would be to not use `href` in the `a`, but to use a click handler instead. Then you can click and you can select the text. https://jsfiddle.net/MrLister/hy5ugo96/9/ (Beware that a select does also count as a click though.) – Mr Lister Feb 07 '17 at 16:13

2 Answers2

0

You can't mark links as whole(thy it on Google for example.) You stretch the link to 100% width and 60px height. in this area you can mark the link. If you start marking out of that area, you can mark the link. Try to do the Stile in a separate object.

Sorry for my bad English. Not native Speaker ;)

Nicolo Lüscher
  • 595
  • 7
  • 22
-2

you may want to use div just like the following code.

.item {
  display: block;
  padding: 1em;
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: white;
}
<div class="item">
<a href="http://www.google.com">Hello World!</a>
</div>
moon shine
  • 93
  • 1
  • 5