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

2022-07-08 04:48:10 字數 961 閱讀 8948

最近專案中需要用css實現限制字數,超出部份顯示點點點...,只需要一下**即可:

width:400px;/*要顯示文字的寬度*/

text-overflow :ellipsis; /*讓截斷的文字顯示為點點。還有乙個值是clip意截斷不顯示點點*/

white-space :nowrap; /*讓文字不換行*/

overflow : hidden; /*超出要隱藏*/

效果圖:

語法: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完美解決這個問題,

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

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

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

divstyle width 200px white space nowrap overflow hidden text overflow ellipsis border 1px solid red 試試看試試看試試看試試看試試看試試看試試看試試看試試看試試看試試看 div 效果 語法 text o...

table內容超出固定寬度顯示點點點,寬度自適應

1.這是js 滑鼠懸停顯示全部隱藏的內容 inithovertitle 使用說明 引數 id的名稱字串格式,td的要顯示全部的class名稱字串格式 table必須新增類.table ellipsis,td必須新增class為.td ell td內容用 內容 巢狀 param idname para...