CSS实现单行多余文字溢出显示省略号|多行文字溢出显示省略号|固定区域纵向滚动|固定区域横向滚动

单行多余文字溢出显示省略号

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