Question

I am creating a web page and have a section that I want to be linked, inside this section though I have some text that I want to allow the user to copy and paste from (i.e they need to be able to highlight it). Because the text is inside the linked div though I am unable to select it, how can I make the text selectable?

Here is the code I have…

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

I’ve tried putting this in the CSS, but this just changed the cursor, it didn’t actually make the text selectable…

.selectable-text{
    cursor:text;
}

Thanks in advance for any help.

Answer 1

a-Elements don’t allow block-elements inside of them. So you cannot structure your layout that way. What about only making the heading a link? That would be fine and you could easily select the other text:

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

In order to make the whole container clickable, you can apply a Javascript Event Listener to all containers. If you are already using jQuery, this can be done very easily:

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

The difference from this to a “real” link is that it won’t be draggable and instead selectable. Anyway you can click on it and it will locate you to where you want to go. It will also apply a class .link which you can use in your stylesheet in order to set a pointer as the cursor.

For people who have javascript disabled there will still be a link in the heading, so your page stays usable in every case.