» How to prevent text selection in html

Its necessary to prevent text selection when the text is ui feature, to make the webpage more professional.

We can prevent the text from selecting by using this in css

user-select: none;

You cannot select this text

You can select this text

example code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <p style="user-select: none;">You cannot select this text</p>
    <p>You can select this text</p>
</body>
</html>

April 28, 2024

Is essential to add tooltip to make web page more professional and understandable The simplest way can we add tooltip is use html inline element <span> We will add the tool in div and tooltip text(tool description) in the span Toll description will be always hide ( display none in css) until the user hover […]

April 27, 2024

The main features we will apply User will able to paste link or text and generate the qr code The dependency We will use qurcodejs a javascript library for this QR Code Generator QR Code Generator Generate QR Code The complete code. Try and customize by yourself. <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta […]

April 27, 2024

Image Gallery The essential structure of the gallery The complete code. Just place your image link in the img tag to show the image <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Image Gallery</title> <style> .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .image-wrapper { position: relative; overflow: hidden; } .zoomable […]

How to prevent text selection in html
April 28, 2024

Related Posts