下面的例子展示了在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>
源码下载：
creating-non-selectable-text-using-css.zip
分享到：
相关推荐
在HTML5中如何使用CSS建立不可选的文字，方法或许有很多，但可以告诉你，本节介绍的这个是不仅可行且极简单的方法，需要的朋友可以看看了
主要介绍了在HTML5中你如何使用CSS建立不可选的文字，使用到了几个罕见的css属性，user-select，下面的示例，大家可以看看
选中“正则表达式”复选框，表明我们要在查找、替换中使用正则表达式。然后，选中“替换范围”中的“当前文件”，表明对当前文件操作。 ②、单击“查找内容”组合框右侧的按钮，出现下拉菜单。 ③、下面的操作添加...
建立文字 创建可拖动的窗口（标题和按钮关闭） 创建对话框（关闭按钮） 创建面板（不关闭按钮的简单对话框） 创建按钮 创建滑块 创建进度 创建微调器 创建仪表 创建单选按钮 创建复选框 建立文字栏位 创建文本...
1.2.2 不可不知的浏览器发展史 1.2.3 浏览网页 1.2.4 网站和网络服务器 1.3 了解html语言 1.3.1 关于html和html编辑器 1.3.2 创建第一个网页 1.3.3 查看网页的源文件 1.4 html 4.0的特点 1.4.1 国际化 1.4.2 可访问...
CloseCW 方便的插入一个关闭当前页面的按钮，可以选择按钮、图片、或者文字3种方式 tooltips 制作注释 UI_components Flash UIComponent Dreamweaver 插件文件名 Dreamweaver 插件简介 floatimg 在页面上制作的...
方便的插入一个关闭当前页面的按钮，可以选择按钮、图片、或者文字3种方式 tooltips 制作注释 UI_components Flash UIComponent floatimg 在页面上制作的飘浮图片插件,没时间封装 mmJIK Macromedia亲自为...
输出首页可选择是否进行文字截取,默认截取400字 .日志最新修改记录 .发表日志时可选择当日天气情况,目前提供五种天气供选择 .统计每篇日志的访问数和评论总数 .比较完善的日志和评论管理功能,可进行批删除,...
静态页时不使用 Remember Me 功能 删除时加上了提示 修正不生成静态页，链接有时会无效的问题 修正文件中版权说明的错位 允许文章列表显示整篇日志的内容 修正退出的框架指向错误 更换分页符号,更好支持 Fire...
四、不得使用超出本计算机范围的资源（可自行输入文字）。 要求： 一、请设计一个以介绍苏州园林和盆景为主的网页。 二、主页的文件名为：index.htm。 三、网页中必须有表格、表单和浮动框架。 四、网页至少有三层...
适合快速建立网址导航网站的各位站长使用。 2、本系统采用html css架构，兼容FF,IE7及以上等主流浏览器【未测试IE6】。 2、TSDQQ网址导航系统的宗旨，纯净，简约，美观，免费。上传到主目录和任何二级目录均可以...
3.修改jdbc链接，自己导入数据库。 4.把服务器下install\config下的web.xml复制出来覆盖掉新建项目WEB-INF下的web.xml 5.classes下有四个文件，手动烤到myeclipse项目src根目录下中 6.将服务器上jeecms项目删掉，...
HTML5结合Mobile:控制手机输入键盘、CSS3版墙贴相册、离线数据库、可拨打电话的HTML链接、确定坐标并反查地址等。 编辑本段 作者简介 余志龙、陈昱勋、郑名杰、陈小风，分别来自手机制造业、电视媒体业、网络、电信...
适合快速建立网址导航网站的各位站长使用。 6、本系统采用html css架构，UTF-8 编码，兼容FF,IE7及以上等主流浏览器【未测试IE6】。 7、本系统的宗旨，纯净，简约，美观，无预留后门，无病毒。 8、网站有后台，...