关于h5移动端开发问题整理

一 、样式问题

1. 同一个列表的图片，上方显示了一个轮播图，有的轮播图指示器显示，有的不显示。 代码实现 transform: translateZ(0); 开启硬件加速，影响元素的层叠顺序，并且将元素置于一个更靠近观察者的平面。
   

2. 当希望文本只保留一行时

   • white-space:nowrap; 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
   • overflow: hidden; //超出部分隐藏
   • text-overflow: ellipsis; //隐藏部分以省略号代替

3. 当文本需要保留多行时

   • webkit内核浏览器(谷歌,Safarim,QQ浏览器)情况下
     overflow: hidden; //超出部分隐藏
     text-overflow:ellipsis; //隐藏部分以省略号代替
     display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
     -webkit-line-clamp: 6; //用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性
     -webkit-box-orient: vertical; //子元素垂直排列
   • 其他浏览器的兼容方案

    li{
		  position:relative;
		  line-height:20px;
		  max-height:40px;
		  overflow:hidden;
		  width: 200px;
		  border: 1px solid red;
	}
	li:after{
		  content: "...";
		  position:absolute;
		  bottom:0;
		  right:0;
		  padding-left:40px;
		  background:linear-gradient(to right,transparent,#fff 55%);
}