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

原文地址: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,大家可以共同学习,共同进步

你可能感兴趣的:(前端)