1. 程式人生 > >小程式scroll-view中文字不換行問題

小程式scroll-view中文字不換行問題

問題描述:在scroll-view 中scroll-x="true"時控制文字超出顯示省略號,要求如圖:

                

                但實際中會出現如文字不換行或樣式錯亂的問題。

橫向滾動的實現如下:


超過兩行顯示省略號:

.scroll_txt{ word-wrap: break-word; display:-webkit-box; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; -webkit-line-clamp:2; -webkit-box-orient
:vertical;}

因為scroll-view上設定了 white-space:nowrap;導致文字不換行,如圖:


這時在.scroll_txt 上新增 white-space:normal !important; 文字換行但是樣式錯亂。如圖:


在父級元素上增加 overflow:hidden; 得以解決。(ios可能出現相容問題,可加層view並浮動)。