在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 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
CSS3 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
HTML5打开本地app应用的方法
Mar 31 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
一个简单的PHP入门源程序
2006/10/09 PHP
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
php smarty的预保留变量总结
2008/12/04 PHP
php中执行系统命令的方法
2015/03/21 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
任意位置显示html菜单
2007/02/01 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
innerText 使用示例
2014/01/23 Javascript
JavaScript File分段上传
2016/03/10 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python threading多线程编程实例
2014/09/18 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
利用python 下载bilibili视频
2020/11/13 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
如何利用find命令查找文件
2016/11/18 面试题
《掌声》教学反思
2014/02/23 职场文书
2014年医院工作总结
2014/11/20 职场文书
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server