今天在寫(xiě)小程序的時(shí)候使用了scroll-view,但是發(fā)現(xiàn)在scroll-view中一行文字不能換行，代碼如下：

<scroll-view scroll-y style="width:100rpx;height:100rpx;">
asdhadjhkajshdkjahsdkjasdajsdhkajsdkajsdkajsdhasjdaksj
</scroll-view>

發(fā)現(xiàn)scroll-view內(nèi)的一大段英文只顯示在一行，超出寬度的部分不能被隱藏了

解決

在網(wǎng)上搜索了一下小程序scroll-view文字不能換行的問(wèn)題后，發(fā)現(xiàn)原來(lái)是小程序組件有一個(gè)默認(rèn)的樣式 white-space: nowrap; ,默認(rèn)是不換行的，所以我就添加了 white-space:normal !important; 來(lái)覆蓋它的默認(rèn)樣式，但是事與愿違，加上后還是不行，于是我又搜索了文字換行，發(fā)現(xiàn)一般的文字換行都會(huì)加上 word-break: break-all; 我加上后發(fā)現(xiàn)確實(shí)可以了

word-break

由于我不是專(zhuān)業(yè)的前端(正努力成為一個(gè)合格的前端工程師)，所以我有特地看了一下word-break的用法，下面是我的一些理解，如有錯(cuò)誤，煩請(qǐng)指正

語(yǔ)法：word-break : normal | break-all | keep-all

參數(shù)：

normal : 依照亞洲語(yǔ)言和非亞洲語(yǔ)言的文本規(guī)則，允許在字內(nèi)換行上面我寫(xiě)的例子沒(méi)有換行是因?yàn)橛⑽氖歉鶕?jù)空格來(lái)判斷是否要換行的，例子中是一長(zhǎng)串英文字符沒(méi)有空格，所以就沒(méi)有換行，在中間加上一個(gè)空格，就會(huì)在空格處進(jìn)行換行，中文是每個(gè)漢字都是一個(gè)獨(dú)立的個(gè)體，每個(gè)字都可以作為換行的標(biāo)識(shí)

break-all ： 該行為與亞洲語(yǔ)言的normal相同。也允許非亞洲語(yǔ)言文本行的任意字內(nèi)斷開(kāi)。該值適合包含一些非亞洲文本的亞洲文本，這個(gè)值會(huì)將單個(gè)的英文字符判定為獨(dú)立的個(gè)體，每個(gè)英文字符都可以作為換行的表示 
 

keep-all :與所有非亞洲語(yǔ)言的normal相同。對(duì)于中文，韓文，日文，不允許字?jǐn)嚅_(kāi)。適合包含少量亞洲文本的非亞洲文本

總結(jié)

以上所述是小編給大家介紹的解決微信小程序scroll-view換行問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！