css样式调整，超出文本省略号、禁止用户选中、鼠标移入改变样式

css常用样式整理

---

前言

在写页面时经常遇到一些css样式需要调整，明明写过却总也记不住，于是将经常用到的一些需求记录下来，方便下次查阅。记得持续写入。。。

---

一、文本超出部分省略点显示

.text{
//单行文本超出部分省略
	overflow: hidden;//超出部分隐藏
	text-overflow:ellipsis;//文本超出部分省略点显示
	white-space: nowrap;//禁止自动换行
	
//多行文本超出部分省略
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;//定义流体盒子
	-webkit-box-orient: vertical;//文本多行垂直显示
	-webkit-line-clamp: 2;//可展示行数
}

示例图片

---

二、禁止用户选中文本

.text{
	user-select:none;//禁止用户选中文本
	//user-select有2个值（none表示不能选中文本，text表示可以选择文本）
	-moz-user-select:none;/*兼容火狐*/
	-webkit-user-select:none;/*webkit浏览器*/
	-ms-user-select:none;/*IE10*/
	-khtml-user-select:none;/*早期浏览器*/
}

---

三、用户移入改变鼠标样式

.div{
	cursor:pointer;//鼠标移入变小手
	cursor:auto;//标准光标
	cursor:default;//标准箭头
	cursor:pointer;//或hand;//手形光标
	cursor:wait;//等待光标
	cursor:text;//I形光标
	cursor:vertical-text;//水平I形光标
	cursor:no-drop;//不可拖动光标
	cursor:not-allowed ;//无效光标
	cursor:help;//帮助光标
	cursor:all-scroll;//三角方向标
	cursor:move;//移动标
	cursor:crosshair;//十字标
	//cursor其他取值
	//e-resize  
	//n-resize  
	//nw-resize  
	//w-resize  
	//s-resize  
	//se-resize  
	//sw-resize
}

总结

别忘了多总结，把写过的需求记下来

在csdn中发布的文章都是免费公开的，帮助自己记忆的同时也希望能帮到更多人，觉得有帮助的可以给博主点个赞，有问题的也欢迎指出来，共同进步