一、div内显示一行,超出部分用省略号显示
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
二、div内显示两行或三行,超出部分用省略号显示
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;(行数)
-webkit-box-orient: vertical;
三、p标签首行缩进两个字符
text-indent: 2em; /*首行缩进两个汉字字符*/
四、鼠标样式
/* 按钮鼠标移入样式 */
.my-banner-button:hover{
cursor: pointer;
}
/* 按钮点击后样式 */
.my-banner-button:active{
background-color: rgba(240,255,255,1);
}
五、div竖排文字
.one {
margin: 0 auto;
height: 140px;
writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/
writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl;*/
}
六、相对定位
.my-youxue-pt-top-left{
width: 790px;
height: 580px;
position: relative;
}
.my-youxue-pt-top-left img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.my-youxue-pt-top-left div{
position: absolute;
top: 218px;
left: 146px;
}
七、div内文字不能被选中
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
八、鼠标样式
cursor:not-allowed 禁止样式
cursor:default 默认光标(通常是一个箭头)
cursor:auto 默认。浏览器设置的光标。
cursor:crosshair 光标呈现为十字线。
cursor:pointer 光标呈现为指示链接的指针(一只手)
cursor:move 此光标指示某对象可被移动。
cursor:text 此光标指示文本。
cursor:wait 此光标指示程序正忙(通常是一只表或沙漏)。
cursor:help 此光标指示可用的帮助(通常是一个问号或一个气球)。
九、Vue兼容IE 360
- 解决不显示内容 在 index.html 添加下面内容
<meta http-equiv="X-UA-Compatible" content="IE=edge">
- 语法不支持
如果出现语法不支持,比如 includes , 那么使用 babel-polyfill 解决:
下载安装 babel-polyfill :
npm install babel-polyfill
在 main.js 中 引入 babel-polyfill 对象:
import 'babel-polyfill'