width:100%;
height:1.2rem //固定高度
line-height:1.2rem
.parentBox{
width:100%;
height:12rem//固定高度
position:relative
}
.sonBox{
width:100%;
height:auto;
position:absolute;
top:50%;
transform:translateY(-50%);
}
p{
width: 20em;/*不允许出现半汉字截断*/
overflow: hidden; /*自动隐藏文字*/
text-overflow: ellipsis;/*文字隐藏后添加省略号*/
white-space: nowrap;/*强制不换行*/
}
/*只适用于移动端*/
p{
width: 20em;
height: 3em;/*注意高度和宽度，不允许出现半汉字截断*/
line-height: 1.5em;//行高*行数要等于高度
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
/*兼容写法*/
p {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}
p::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
}
grandParentBox{
width:100%;//给定宽度
height:auto;
overflow-y:hidden;
overflow-x:auto;
}
parentBox{
width:20rem;//给定宽度
heigth:100%;
}
sonBox{
Anything
}
#app{
width:100%;
height:100%;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
- srcoll touch 会影响z-index值 从而导致fixed住的div块消失，最好是局部采用滚动样式
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
