小程序 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並浮動)。

 

 

 

原文：https://blog.csdn.net/ifrwrit/article/details/80054525