做前端web開發(fā)的朋友可能經(jīng)常會遇到這個問題,頁面中一些區(qū)域是由后臺渲染的數(shù)據(jù),但是頁面空間有限,尤其是移動端,手機屏幕區(qū)域有限,有時候?后臺數(shù)據(jù)返回的文字過多,會造成溢出,往往會出現(xiàn)換行,高度撐開,或者溢出等不友好的顯示。
我這里以一個店員管理的web頁面作為實例,來帶大家解決一下類似于這種問題。為了表現(xiàn)出問題所在,我將數(shù)據(jù)字符的長度夸張展示了,意在表達問題,有助于大家理解。
正常情況:
店員昵稱為:小明同學 ? ??
店鋪名稱為:小明同學的店鋪
數(shù)據(jù)較短
非正常情況:
因為后臺返回來的店員和店鋪名稱為用戶自定義的,字符串長度并不固定,就會出現(xiàn)以下情況。
店員昵稱為:萊奧納多·達·芬奇(LEONARDO DA VINCI)? ? ? ? ?
店鋪名稱為:萊奧納多·達·芬奇(LEONARDO DA VINCI)的充滿幻想的神秘小屋
數(shù)據(jù)過長
優(yōu)化后的效果:
友好展示
實現(xiàn)思路:
思路代碼