在HTML5中如何使用CSS建立不可选的文字


Posted in HTML / CSS onOctober 17, 2014

下面的例子展示了在HTML5中你如何使用CSS建立不可选的文字。 

复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>Creating non-selectable text using CSS</title>
<style type="text/css">
div {
margin-bottom: 20px;
padding: 10px;
background: rgba(10%, 10%, 10%, 0.3);
-moz-border-radius: 15px;
border-radius: 15px;
}
div#d2 {
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
font-style: italic;
}
</style>
</head>
<body>
<div id="d1">[selectable] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare, urna placerat condimentum vehicula, magna est suscipit leo, auctor laoreet erat massa eget tellus. Etiam pharetra, orci eu gravida tempus, enim est venenatis diam, id facilisis justo ante ut arcu. Sed nibh eros, porta ac porta ac, fermentum ut ante. Etiam pulvinar consectetur urna sit amet fermentum. Aliquam quis pellentesque tortor. In ut lobortis enim. Pellentesque luctus orci nec massa lacinia consectetur. Etiam cursus, leo et pellentesque tempus, diam elit interdum ipsum, sed pulvinar nibh justo vel urna. Phasellus ligula elit, sodales eget aliquet et, ullamcorper ut lorem. Praesent eget quam id ligula iaculis tincidunt eu et nulla. Ut dui dui, dictum sed lobortis eu, porta nec urna. In adipiscing, massa sed scelerisque elementum, tortor massa cursus velit, ut tincidunt mi lacus id magna. Morbi vestibulum venenatis massa sit amet convallis. Aliquam erat volutpat.</div>
<div id="d2">[non selectable] Nam a lacus ante, a tincidunt dolor. Sed felis dolor, ullamcorper vitae luctus at, iaculis eu dui. Mauris ullamcorper nisl id tortor elementum mattis. Aenean ut ligula ac ipsum pharetra dapibus. Praesent convallis tincidunt ligula sit amet adipiscing. Morbi massa mauris, mollis ornare mollis ut, imperdiet nec nibh. Praesent sollicitudin tellus at nisl sodales lobortis euismod purus laoreet. Vivamus nec urna vel nibh volutpat rhoncus quis eget justo. Donec mi lacus, dapibus nec tristique eu, fringilla id mi. Maecenas vitae odio a tortor cursus fermentum eu eget eros. Vestibulum sit amet metus purus. Integer vestibulum sem nec justo facilisis tempor non sit amet justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget mattis metus.</div>
<div id="d3">[selectable] Proin lacinia sem fringilla est lacinia facilisis. Praesent turpis massa, bibendum eu ultrices ut, viverra vitae quam. Morbi a lorem mi, eget congue arcu. Sed dapibus molestie neque, eget tempus nibh viverra at. Praesent sit amet vestibulum ipsum. Donec in lectus ac urna accumsan feugiat. Sed at nunc felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis nec ipsum justo. Nullam laoreet enim vel quam tincidunt imperdiet. Maecenas sollicitudin nulla a metus ornare tempus. Nullam rhoncus fermentum lorem id pellentesque.</div>
</body>
</html>
HTML / CSS 相关文章推荐
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
Dec 30 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
Nov 12 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
使用canvas对video视频某一刻截图功能
Sep 25 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 #HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 #HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 #HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 #HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 #HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 #HTML / CSS
css3 transform属性详解
Sep 30 #HTML / CSS
You might like
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
python实现sublime3的less编译插件示例
2014/04/27 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
解释i节点在文件系统中的作用
2013/11/26 面试题
银行竞聘演讲稿
2014/05/16 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
Python3 如何开启自带http服务
2021/05/18 Python
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
浅谈Vue的computed计算属性
2022/03/21 Vue.js