今天碰到了個問題，view并不能讓文本自動換行 
看看官方定義的view組件，原本的view定義的display為block。 
之前忘了在哪里看到小程序布局的時候用flex，所以涉及到了CSS3的display:flex。 
具體學(xué)習(xí)，看阮一峰老師的教程

看這次出現(xiàn)的問題，是文字太長被吃掉了，截圖：

依靠我多年的開發(fā)經(jīng)驗(yàn)，試倒是被我試出來了，整理了一下思路，一般出現(xiàn)滾軸（在圖片或者文字片段中）是因?yàn)閣idth，display，（height，padding，margin），對于文字片段（這里只針對中文）實(shí)在不行就只能強(qiáng)制換行，例如flex-wrap:warp，white-space:pre-wrap。

然后考慮了以下幾種方法

• 首先，width是100%，如果涉及到padding就要注意width和padding-left以及padding-right的加減問題
• 其次是height，一般除非固定了大小，不然我不會設(shè)置height，而是讓內(nèi)容填充起來高度之后，給它加上適當(dāng)?shù)膒adding-top和padding-bottom
• 另外是margin，這里并沒有用到就不說了

方法一：放任不管，讓view保持原本的display為block（出現(xiàn)滾軸）

如果不去設(shè)置view的display，則會出現(xiàn)如圖的情況：

沒錯又是滾軸，這次不是因?yàn)閳D片（圖片出現(xiàn)滾軸的問題請參考這篇文章 scroll-view中，image組件出現(xiàn)滾軸）

方法二：view { display:block }，再采取強(qiáng)制換行white-space: pre-wrap;（其實(shí)是可以的，看個人的編程習(xí)慣）

（強(qiáng)制換行的鏈接看這個：css強(qiáng)制換行和超出隱藏實(shí)現(xiàn)） 
結(jié)果成這樣了

當(dāng)時的表情簡直就是， 哪來的這么大的空隙！！調(diào)line-height肯定不對，但是pre-wrap里面又沒找到padding或者margin之類的東西。

會不會是display的問題，于是有了方法三。

方法三：view { display:flex }，再加上css3的flex-wrap:wrap;flex-direction:row;（不起作用）

第一步，先將view的display轉(zhuǎn)為flex； 
第二步，設(shè)置view的flex-wrap:wrap; 
中規(guī)中矩的寫完，然鵝沒有什么用。。 

會不會是因?yàn)檫€要flex-direction:row;？然鵝加上去還是沒用

后來找到資料（雖然和這個有點(diǎn)相似但是不一樣的問題，資料是這個：微信小程序 scroll-view flex-wrap 失效問題），有人在評論中提到在scroll-view中，display:flex是沒有用的，所以就排除display的問題了。 
既然display沒問題，就有了方法四。

方法四：view { display:block }，再采取強(qiáng)制換行white-space: pre-line;（看個人的編程習(xí)慣）

首先得解釋，什么是pre-line，參考文檔：white-space 
對比一下方法二的white-space:pre-wrap和方法四的white-space:pre-line

white-space取值	描述	圖片	new lines （新的一行）	Spaces and tabs （空格和tab）	Text wrapping （文字環(huán)繞）
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 （環(huán)繞）
pre-wrap	Sequences of whitespace are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes. （保留空白，像<br>標(biāo)簽一樣換行，去填充盒子）		Preserve （保存，也就是會有新的一行）	Preserve （保存，也就是會有空格和tab）	Wrap （環(huán)繞）
pre-line	Sequences of whitespace are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes. （不保留空白，像<br>標(biāo)簽一樣換行，去填充盒子）		Preserve （保存，也就是會有新的一行）	Collapse （奔潰，也就是沒有空格和tab）	Wrap （環(huán)繞）

對比方法二和方法四，說是編程習(xí)慣的問題，如圖 

標(biāo)簽和文字之間換行： 

標(biāo)簽和文字之間不換行： 

所以方法二使用pre-wrap之所以會出現(xiàn)那么大的一片空白，就是因?yàn)樗Ａ艨瞻缀蛅ab。但是方法四pre-line就會去除空白和tab。

對于個人的編程習(xí)慣，因?yàn)槲淖植淮_定多少的問題，我是標(biāo)簽中間加文字，同時會換行，所以我這里使用的是方法四的white-space:pre-line; 

接下來為了美觀，就是調(diào)一下line-height和padding的問題了。最后效果： 

結(jié)論就是，scroll-view中，設(shè)置display:flex是沒不起作用的

中文文字片段在view中不能換行的問題，要使用強(qiáng)制換行，至于是使用white-space:pre-line（不會保留空白和tabs），還是white-space:pre-wrap（會保留空白和tabs），就要看個人的編程習(xí)慣了