微信小程序 view的文本不能自动换行问题

今天碰到了个问题，view并不能让文本自动换行
看看官方定义的view组件，原本的view定义的display为block。
之前忘了在哪里看到小程序布局的时候用flex，所以涉及到了css3的display:flex。
具体学习，看阮一峰老师的教程

看这次出现的问题，是文字太长被吃掉了，截图：
依靠我多年的开发经验，试倒是被我试出来了，整理了一下思路，一般出现滚轴（在图片或者文字片段中）是因为width，display，（height，padding，margin），对于文字片段（这里只针对中文）实在不行就只能强制换行，例如flex-wrap:warp，white-space:pre-wrap。

然后考虑了以下几种方法

首先，width是100%，如果涉及到padding就要注意width和padding-left以及padding-right的加减问题
其次是height，一般除非固定了大小，不然我不会设置height，而是让内容填充起来高度之后，给它加上适当的padding-top和padding-bottom
另外是margin，这里并没有用到就不说了
方法一：放任不管，让view保持原本的display为block（出现滚轴）
如果不去设置view的display，则会出现如图的情况：
没错又是滚轴，这次不是因为图片（图片出现滚轴的问题请参考这篇文章 scroll-view中，image组件出现滚轴）

方法二：view { display:block }，再采取强制换行white-space: pre-wrap;（其实是可以的，看个人的编程习惯）
（强制换行的链接看这个：css强制换行和超出隐藏实现）
结果成这样了
当时的表情简直就是 哪来的这么大的空隙！！调line-height肯定不对，但是pre-wrap里面又没找到padding或者margin之类的东西。

会不会是display的问题，于是有了方法三。

方法三：view { display:flex }，再加上css3的flex-wrap:wrap;flex-direction:row;（不起作用）
第一步，先将view的display转为flex；
第二步，设置view的flex-wrap:wrap;
中规中矩的写完，然鹅没有什么用。。

会不会是因为还要flex-direction:row;？然鹅加上去还是没用

后来找到资料（虽然和这个有点相似但是不一样的问题，资料是这个：微信小程序 scroll-view flex-wrap 失效问题），有人在评论中提到在scroll-view中，display:flex是没有用的，所以就排除display的问题了。
既然display没问题，就有了方法四。

方法四：view { display:block }，再采取强制换行white-space: pre-line;（看个人的编程习惯）
首先得解释，什么是pre-line，参考文档：white-space
对比一下方法二的white-space:pre-wrap和方法四的white-space:pre-line

white-space取值    描述    图片    new lines
（新的一行）    Spaces and tabs
（空格和tab）    Text wrapping
（文字环绕）
normal    Sequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes.        Collapse
（奔溃，也就是没有新的一行）    Collapse
（奔溃，也就是没有空格和tab）    Wrap
（环绕）
pre-wrap    Sequences of whitespace are preserved. Lines are broken at newline characters, at
, and as necessary to fill line boxes.
（保留空白，像
标签一样换行，去填充盒子）        Preserve
（保存，也就是会有新的一行）    Preserve
（保存，也就是会有空格和tab）    Wrap
（环绕）
pre-line    Sequences of whitespace are collapsed. Lines are broken at newline characters, at
, and as necessary to fill line boxes.
（不保留空白，像
标签一样换行，去填充盒子）        Preserve
（保存，也就是会有新的一行）    Collapse
（奔溃，也就是没有空格和tab）    Wrap
（环绕）
对比方法二和方法四，说是编程习惯的问题，如图

标签和文字之间换行：

标签和文字之间不换行：

所以方法二使用pre-wrap之所以会出现那么大的一片空白，就是因为它保留空白和tab。但是方法四pre-line就会去除空白和tab。

对于个人的编程习惯，因为文字不确定多少的问题，我是标签中间加文字，同时会换行，所以我这里使用的是方法四的white-space:pre-line;

接下来为了美观，就是调一下line-height和padding的问题了。最后效果：

结论就是，scroll-view中，设置display:flex是没不起作用的

中文文字片段在view中不能换行的问题，要使用强制换行，至于是使用white-space:pre-line（不会保留空白和tabs），还是white-space:pre-wrap（会保留空白和tabs），就要看个人的编程习惯了

有 0 个人打赏
————————————————
版权声明：本文为CSDN博主「电鳗效应」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_2842405070/article/details/69415164