关于小程序中文字过长换行的问题

369 阅读1分钟

遇到的问题:

后端返回了一个字段,文字特别长,自动换行后发现前一行文字没有铺满就换行了,导致页面渲染的数据列表看起来参差不齐

原因:

view标签内数字/字母不换行,导致汉字与其他字符分行显示,即数字/字母不会分割开来分行显示,导致前一行没有铺满,遇到数字/字母就换行了

解决办法:

view { word-break: break-all; }

原理:

word-break:break-all;

例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词/数字很长,它会把单词/数字截断,变成该行末端为单词/数字的前端部分),下一行为单词/数字的后端部分了。

补充:

word-wrap:break-word 和上面那个区别就是它会把整个单词/数字看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词/数字放到下一行,而不会把单词/数字截断掉的。