如何實現CSS限制字數,超出部份顯示省略號

2022-08-11 10:39:13 字數 977 閱讀 7441

<

divstyle

="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid red"

>

試試看試試看試試看試試看試試看試試看試試看試試看試試看試試看試試看

div>

效果:語法:text-overflow : clip | ellipsis

引數:clip :  不顯示省略標記(...),而是簡單的裁切

(clip這個引數是不常用的!)

ellipsis :  當物件內文字溢位時顯示省略標記(...)

說明:設定或檢索是否使用乙個省略標記(...)標示物件內文字的溢位。

請您注意,text-overflow:ellipsis屬性在ff中是沒有效果的。

示例:div

text-overflow是乙個比較特殊的樣式,我們可以用它代替我們通常所用的標題擷取函式,而且這樣做對搜尋引擎更加友好,如:標題檔案有50 個漢字,而我們的列表可能只有300px的寬度。如果用標題擷取函式,則標題不是完整的,如果我們用css樣式text- overflow:ellipsis,輸出的標題是完整的,只是受容器大小的侷限不顯示出來罷了。

text-overflow屬性僅是註解,當文字溢位時是否顯示省略標記。並不具備其它的樣式屬性定義。我們想要實現溢位時產生省 略號的效果。還必須定義:強制文字在一行內顯示(white-space:nowrap)及溢位內容為隱藏(overflow:hidden)。只有這樣 才能實現溢位文字顯示省略號的效果。

有的時候的某段文字太長了,會影響整個的布局,很多人用動態語言來解決這個問題,但必須區分中文和英文,因為中文相當於兩個英文本元長度,這樣不僅繁瑣,而且加重了伺服器的負擔。其實,我們完全可以使用css完美解決這個問題,

white-space:nowrap;overflow:hidden;text-overflow:ellipsis;  

>

如何實現CSS限制字數,超出部份顯示點點點

試試看試試看試試看試試看試試看試試看試試看試試看試試看試試看試試看 效果 語法 text overflow clip ellipsis 引數 clip 不顯示省略標記 而是簡單的裁切 clip這個引數是不常用的!ellipsis 當物件內文字溢位時顯示省略標記 說明 設定或檢索是否使用乙個省略標記 ...

CSS限制字數,超出部份顯示點點點

最近專案中需要用css實現限制字數,超出部份顯示點點點.只需要一下 即可 width 400px 要顯示文字的寬度 text overflow ellipsis 讓截斷的文字顯示為點點。還有乙個值是clip意截斷不顯示點點 white space nowrap 讓文字不換行 overflow hid...

EditText超出字數限制,給使用者提示

當我們在editext輸入內容的時候,檢測如果超過限制的長度無法輸入內容,並且給使用者提示。首先我想到了下面的方法 edittext.addtextchangedlistener new textwatcher override public void ontextchanged charseque...