为什么微信小程序view文本会显示空格?如何解决显示空格的问题?

    你有没有想过这么火的微信小程序开发是什么样的?小程序的开发包括微信小程序编程，小程序编程工作是一件特别烧脑的事，在编程当中会遇到很多问题，但必须要解决才能进行下一个项目，今天小编要说的是微信小程序view文本会显示空格的问题，那为什么微信小程序view文本会显示空格?如何解决显示空格的问题?

　　在小程序编程时如果出现了微信小程序view文本会显示空格的问题，这是因为微信小程序 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，则会出现如图的情况：

　　没错又是滚轴，这次不是因为图片

　　方法二：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

　　对比方法二和方法四，说是编程习惯的问题，如图

　　标签和文字之间换行：

　　标签和文字之间不换行：

　　所以方法二使用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)，就要看个人的编程习惯

　　以上为什么微信小程序view文本会显示空格?如何解决显示空格的问题?就讲到这里，希望给正在遇到微信小程序view文本会显示空格的问题的大家一些帮助，更多更精彩的微信小程序资讯，请持续关注微小乔，更多精彩干货等着你。

　　更多精彩阅读：

　　如何使用微信小程序text空格

　　微信小程序空格代码，小程序实用代码大全

　　微信小程序空格代码有什么作用?