Make text “more” selectable

Question

I have text in a

tag:

Hello world... and goodbye mind A B!

How do I increase the area in which the te

Answer 1

You could add padding around paragraphs as someone already suggested but also use negative margin of the same value to prevent it from affecting layout.

Here is DEMO (double-clicking or long-tapping anywhere inside gray area should select text)

Relevant code:

HTML:

normal paragraph

fat fingers paragraph

CSS:

p {
    //resetting default browser styles for brevity
    //otherwise adjust negative margin value so it's == default margin - padding
    margin: 0;
}

.fat-fingers {
    padding: 10px;
    margin: -10px;
}

note: I didn't test case of two areas overlapping but I assume that the one with higher stacking order wins.