在HTML5中如何使用CSS建立不可选的文字
2014-10-17 17:20
423 查看
下面的例子展示了在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>
相关文章推荐
- 在HTML5中你如何使用CSS建立不可选的文字
- 使用CSS设置文字不可选
- 使用CSS如何实现文字竖排
- 使用CSS如何实现页面两行文字两端对齐
- 使用DIV+CSS布局网页后,容器内的文字不可选择的解决方案
- HTML5实践 -- 如何使用css创建三角形,使用CSS3创建3d四面体
- 如何建立和使用Jmeter测试环境(初学者)
- [导入]再谈css--如何针对不同位置的元素使用不同的风格
- 关于css中如何使用#和.的总结
- 如何用CSS 实现文字段落2端对齐
- 实例CSS中如何正确的使用 id 和 class?
- Trufun产品使用技巧之——如何让用例文字自动换行?
- 如何使用qtp检查网页中显示的文字颜色为指定的颜色
- 如何使用JXTA技术建立P2P网络
- 如何重覆使用ECO建立的企業邏輯模型
- 如何使用Orcas的CSS功能
- 如何使用MSCS建立SQL Server集群
- [How To]如何使用Wildfish进行ISeries项目开发--数据库建立部分
- 如何使用CSS来进行网页排版
- 如何使用CSS VS2005