首页 > 其他 > 详细

处理文字的换行,超出省略等white-space属性

时间:2020-04-06 17:42:43      阅读:66      评论:0      收藏:0      [点我收藏+]
normal:默认处理方式。
pre:用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行。可查阅pre对象
nowrap:强制在同一行内显示所有文本,合并文本间的多余空白,直到文本结束或者遭遇br对象。
pre-wrap:用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行。
pre-line:保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。 

  

 

.c_text_ellipsis_2 {
    //注意不能用padding,只能用margin顶开
    //2行的时候超出隐藏,有兼容
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.c_text_ellipsis_1 {
    //注意如果用了flex,记得在display:flex级别写overflow: hidden;
    //一行的时候超出隐藏
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

  技术分享图片

 

处理文字的换行,超出省略等white-space属性

原文:https://www.cnblogs.com/jsgg/p/12642968.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!