一、单行文本截字
p { ???text-overflow: ellipsis;/*显示省略号代替裁剪的文本*/ ???white-space: nowrap;/*空白处理方式 不换行*/ ???overflow: hidden;/*溢出隐藏*/} ???
效果:
二、多行文本截字
p{ ???display:-webkit-box;/*设置盒子为弹性盒容器*/ ???-webkit-box-orient:vertical;/*设置盒子内部排列方式为垂直排列*/ ???-webkit-line-clamp:2;/*显示两行*/ ???text-overflow:ellipsis;/*用省略号代替才建的文字*/ ???overflow:hidden;/*溢出隐藏*/ ???/*若为纯字母、数字,需要加上下面这句*/ ???word-break:break-all;}
效果
css文本截字,超出文本省略号显示
原文地址:https://www.cnblogs.com/zjp-/p/9005936.html