CSS阻止文本选择

　　在日常运用中，经常遇到点击按钮/菜单的时候，选中了文本，为了避免这种情况，可以使用纯css来解决这个问题（IE10+），对于旧版本的就只能用js：onselectstart = ‘return false;‘这种方式。以下介绍一下-prefix-user-select：

Formal syntax: none | text | all | element
(-prefix-)user-select: none;　　//全部都不可选择
(-prefix-)user-select: text;　　//允许文本选择
(-prefix-)user-select: all;　　//In an HTML editor, if a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.
(-prefix-)user-select: element;　　//只有IE ff支持，无视……

注意这属性不属于w3c标准！

　　目前主要使用的是none & text　　假定结构如下：

<body>
    <nav>
        <dt>level 1</dt>
    </nav>
    <p>xxxxxxxxxxxxxxxxxxxx</p>
</body>

　　CSS如下：

body{
    -webkit-user-select: none;
}    

nav dt{
    -webkit-user-select: text;
}

　　结果是：p标签的文字不能选中，dt的文字则能正常选中。

时间： 2024-11-03 19:42:05

CSS阻止文本选择的相关文章

css禁止用户选择文本（兼容所有浏览器）

css禁止用户选择文本(兼容所有浏览器) 如果让整个页面都禁止选择,可以使用下面的css body{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 如果希望指定元素禁止访问,请看下面的示例代码: <!doctype html> <html

css实现文本超出li宽度的部分隐藏

css实现文本超出li宽度的部分隐藏:在某些实际应用中,希望把文本超出的部分隐藏而非换行,下面就是一段这样的代码实例,大家可以参考一下.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title&

CSS换行文本溢出显示省略号

现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素则需要使用display设置为inline-block; 下面是对a,span等行内元素的使用CSS换行文本溢出显示省略号的比较准确的用法: a,span { overflow: hidden; text-align: center; text-overflow: ellipsis; white-s

css常用文本属性

[CSS常用文本属性] 1. 字体.字号类: ① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体也可以使用100-900数值,400表示normal,700表示bold ② font-style: 字体样式. italic-倾斜.normal-正常 ③ font-size: 字号. 可以写px单位,也可以写% 200%表示浏览器默认大小(16px)的两倍=32px ④ font-family: 字体系列(字体族). >>> 可以直接写字体

css 构造文本

css 构造文本 1. 首行缩进 text-indent :20px; 2em; 10% 2. 文本对齐 text-align : left, right ,center , 3. 文本行高 line-height 4. 字间隔 word-spacing 5. 字母间隔 letter-spacing 6. 文本修饰 text-decoration : underline, overline ,lint-through 7. 字体 font-family 8. 字体大小 font-size 9.

CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行

CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;

CSS中文本继承情况

无继承性的属性 http://www.cnblogs.com/thislbq/p/5882105.html vertical-align: 垂直文本对齐 CSS中文本可以继承父级样式体系列属性 font:组合文字 font-family:字体系列 font-weight:文字粗细 font-size:文字大小 font-style:文字风格文本系列 text-indent:文本缩进 text-align:文本对齐方式 line-height:行高 color:文本颜色

文本选择问题： css & js

CSS: 1 /*Disable browser selection*/ 2 .disableselect 3 { 4 -webkit-user-select: none; 5 -moz-user-select: none; 6 user-select: none; 7 -ms-user-select:none; 8 -webkit-touch-callout:none; 9 -webkit-tap-highlight-color: rgba(0,0,0,0); 10 } 11 .enables