美文网首页
前端随笔--html中文字不换行的处理方法

前端随笔--html中文字不换行的处理方法

作者: 天际流痕 | 来源:发表于2018-06-21 09:44 被阅读0次

    原文地址:http://www.5ixiudou.com/portal/detailInfo/1000000005/211

    前言:在html中,连续的数字和字母,以及字母和数字的组合是不会自动换行的。如果想要设置自动换行,可以应用样式:word-wrap: break-word;

    1.有时,我们在前端,需要设计类似于这样的消息框,会限定消息框的 width 和 height:

    但是,如果当我们的消息内容为数字或者字母的时候,就变成这样的了

    2.有汉字的话,还是正确的:

    3.可以使用样式 word-wrap: break-word; 进行文字的自动换行。

    4.完整的对比如下:

    注意:如果需要自己设计并使用类似于上面的消息框时,最好设置换行样式。因为消失可能是通过ajax动态获取的,如果存放的消息内容是纯字母或者数字或者数字字母组合,而且内容又比较多,那就样式错乱了哦。

    更多内容,大家可以关注我的个人网站 www.5ixiudou.com,大家可以共同学习,共同进步

    相关文章

      网友评论

          本文标题:前端随笔--html中文字不换行的处理方法

          本文链接:https://www.haomeiwen.com/subject/eqfqyftx.html