在專案中發現系統右上角顯示的使用者名稱過長時，無法正常顯示，使用者名稱所在的div會跑到下面去，發現這個問題後，我有三種思路，乙個是使用者在註冊的時候，控制其輸入的使用者名稱不要過長，這是一種不友好的方法，一般來說使用者會使用自己的姓名全拼之類的作為使用者名稱，這樣限制的話會影響使用者的正常使用；二是使用使用者名稱過長時，自動折行顯示的方法，在網上找了一下類似的使用方法，發現顯示效果也不理想；最後一種就是過長的文字使用省略號顯示，這樣既不會影響使用者的使用，看起來也比較規範。
在使用的時候只需要將以下的css樣式繫結到使用者名稱顯示所在的div就好：
.test1、寬度一定要設定，可以根據實際需求調整，這裡我用了200px顯示比較適合；
2、white-space: nowrap是禁止文字折行；
3、text-overflow表示當文字溢位時是否顯示省略標記，有兩個值：
clip：不顯示省略標記（...），而是簡單的裁切；
ellipsis：當物件內文字溢位時顯示省略標記（...）；
4、overflow:hidden表示溢位內容為隱藏。
以下就是顯示的效果~
css實現文字過長顯示省略號的方法
當物件內文字溢位時顯示省略標記 這是乙個例子，其實我們只需要顯示如下長度 css實現網頁中文字過長擷取.title class應該這樣寫 title 說明 1 寬度一定要設定，可以根據實際需求調整。2 white space nowrap是禁止文字折行。3 text overflow表示當文字溢位時...
CSS實現標題文字過長部分顯示省略號的方法
前段時間在公司移動站的重構，遇到了乙個產品列表title的需求是只顯示兩行，然後超過兩行的字元用省略號顯示。如下圖的效果，當時第一感覺是這個需求只能通過後台輸出的時候擷取字元去處理，或者通過js計算字元來處理，因為樣式無法控制換行文字出現省略，但是因為我們新版的移動站是流式布局，在不同解析度下的手機...
css實現文字溢位顯示省略號
看到很多 上的文章列表只顯示一部分，之後就是乙個閱讀全文鏈結，或者是以乙個省略號結尾。今天就說說單行文字，多行文字溢位時怎麼顯示省略號？overflow hidden white space nowrap text overflow ellipsis display webkit box 將物件作為...