文字溢位顯示省略

2022-02-25 11:32:52 字數 353 閱讀 9121

在做靜態頁面的有時候,有些文字內容我們考慮不多,就簡單的寫幾個文字放在那裡顯示,瀏覽靜態檔案的時候沒什麼問題,當後台開發講頁面套好資料後,可能有些文字比較長,這樣我們以前定義單行的內容就會出現換行,頁面的改區域就不能正常顯示了,出現錯位。這個問題我需要提前想到,解決辦法有很多種,前端和後台都有處理的方法。

前端方面處理方法

css控制(前提要定義固定寬度)

p

js控制(基於jquery,這個和後台處理的原理一樣)

$("p").each(function

(i);

});

後台處理方法也是擷取相應的字段,不同語言都有相應的方法。

文字溢位顯示省略號

在開發過程中經常會遇到文字過長超出文字的寬度,這時候我們會考慮將文字截斷,但是只顧截斷會失去互動的友好性,因為使用者不知道後面還有內容,我們會在文字超出寬度的部分加上省略號,然後加上title屬性,當使用者滑鼠放到此處提示完整資訊。文字溢位顯示省略號有兩種情況 單行文字 1 text overflo...

文字溢位顯示省略號

使用text overflow屬性,並且要加width寬度屬性 overflow hidden text overflow ellipsis white space nowrap 1.webkit核心和移動端的瀏覽器,使用css擴充套件屬性 display webkit box webkit box...

顯示號省略文字的溢位

1.先強制一行內顯示文字 white space normal 當文字顯示不開時自動換行 white space nowrap 要文字強制一行內顯示所有文字 2.超出的部分隱藏 overflow hidden 溢位隱藏 3.文字用省略號代替超出的部分 text overflow 文字溢位 設定或檢索...