关于H5的一些杂项记录

一、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

1. 解决不显示内容 在 index.html 添加下面内容

<meta http-equiv="X-UA-Compatible" content="IE=edge">

3. 语法不支持
   如果出现语法不支持，比如 includes , 那么使用 babel-polyfill 解决：
   下载安装 babel-polyfill ：

npm install babel-polyfill

在 main.js 中 引入 babel-polyfill 对象：

import 'babel-polyfill'