小程序后台读取的内容超出 的宽度不换行问
2019-05-15 本文已影响0人
是曹不是蔡
如下图,白色区域内的是我后台读取的内容,很明显超出了,但是没有自动换行
![](https://img.haomeiwen.com/i14939794/0b826d445dfd2976.png)
在这里添加一个样式就行了:word-break: break-all; 这是强制性换行样式,他还有个兄弟 word-wrap:break-word;这两者是有区别的;
1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。
2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。
![](https://img.haomeiwen.com/i14939794/d10cc7c2d8127728.png)
![](https://img.haomeiwen.com/i14939794/630eb20e91967d52.png)
当内容不是单词是效果没啥区别的样子,当是单词时就有区别了,就如他们介绍一般:
![](https://img.haomeiwen.com/i14939794/ad1e00683dfb8c1a.png)
![](https://img.haomeiwen.com/i14939794/a0e8756fef14879b.png)
希望对你有所帮助!