单行多余文字溢出显示省略号
p {
width: 200px;/*指定宽度*/
white-space: nowrap;/*强制不换行*/
text-overflow: ellipsis;/*溢出部分用省略号替代*/
overflow: hidden;/*溢出隐藏*/
}
效果图:
单行文字溢出显示省略号.png
多行多余文字溢出显示省略号
p {
width: 200px;/*指定宽度 必要*/
display: -webkit-box;/*将对象作为弹性伸缩盒子模型显示 必要*/
-webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素的排列方式 必要*/
-webkit-line-clamp: 2;/*指定第几行溢出省略 必要*/
overflow: hidden;/*溢出隐藏 必要*/
}
效果图:
多行文字溢出显示省略号.png
固定区域纵向滚动
div {
width: 750px;/*指定宽度*/
height: 450px;/*指定高度*/
overflow: auto;/*如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容*/
}
div::-webkit-scrollbar {
display: none;/*将滚动条隐藏*/
}
效果图:
固定区域竖向滚动1.png
固定区域竖向滚动2.png
固定区域横向滚动
div {
width: 750px;/*指定宽度*/
white-space: nowrap;/*强制不换行*/
overflow-x: auto;/*x轴方向上，如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容*/
-webkit-overflow-scrolling: touch;/*属性控制元素在移动设备上是否使用滚动回弹效果，*/
}
div::-webkit-scrollbar {
display: none;/*将滚动条隐藏*/
}
/*-webkit-overflow-scrolling: 设置值为touch时:使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。*/
/*-webkit-overflow-scrolling: 设置值为auto时:使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。*/
效果图:
固定区域横向滚动1.png
固定区域横向滚动2.png
