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块消失,最好是局部采用滚动样式
网友评论