一, 单行文本截字
- 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;
- }
效果
来源: http://www.bubuko.com/infodetail-2591656.html