การทำให้ตัวอักษร html ไม่สามารถ select ได้

        ปกติเราจะสามารถใช้เมาส์ครอบตัวหนังสือได้แบบรูปข้างล่างนี้  แต่ถ้าเราใช้ class ข้างล่างนี้เราจะไม่สามารถครอบตัวหนังสือที่มี class นี้อยู่ได้

ไม่สามารถ select ได้

.text-unselectable{
    -webkit-touch-callout: none; /* none | text | auto */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

สามารถ select ได้

.text-selectable{
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

        ผมเอาไว้ทำตัวหนังสือที่อยู่ในปุ่มน่ะครับ  คือทำปุ่มเอง   โดยใช้พวก div หรือ span ทีนี้มันจะชอบเจอปัญหาว่า พอคลิกไปเรื่อยๆ  ตัวหนังสือมันไม่นิ่ง  ตัวหนังสือข้างใน ปุ่มมันจะโดนครอบ  ทำให้รู้สึกว่า  เขียนปุ่มเหมือนไม่ใช่ปุ่ม  ดูแล้วมันไม่สบายตา  ผมก็เลยลองหาวิธีแก้ดูครับ  เลยได้โซลูชั่นนี้มาครับ