div內多行文字,溢位部分用省略號顯示

2021-03-05 09:16:07 字數 5498 閱讀 8501

1樓:丶人賤合一丶

可以,不過只適合webkit瀏覽器。

在css樣式中加入:

text-overflow: -o-ellipsis-lastline;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: x; ————這個x表示要顯示幾行

-webkit-box-orient: vertical;

其中div的高度自己要規定好。

這個是單行的。

在css樣式中加入

width:100px; //你所要的寬度white-space:nowrap;

text-overflow:ellipsis;

-o-text-overflow:ellipsis;

overflow: hidden;

2樓:匿名使用者

也是這個問題,搞定了。

//單行

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

//多行

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;/*顯示幾行*/overflow: hidden;

3樓:豆芽君

在css樣式中加入

width:100px; //你所要

的寬度white-space:nowrap;

text-overflow:ellipsis;

-o-text-overflow:ellipsis;

overflow: hidden;

4樓:

1、首先,顯示標尺。正常情況直接見於word介面中上部。 2、游標停在公式所在的行,不要求行中的具體位置。

3、選擇【格式】選單中的-製表位(t),在出現的對話方塊中設定你所需要的左製表位、右製表位、居中等,根據需要還可以設定前導符號(就像目錄中頁碼前的省略號)。需要有點兒耐心,很快你就精通製表位的設定了。練習:

設定一個左對齊的製表位為5個字元,一個右對齊的製表位為35個字元。清除不需要的製表位。 4、假設一行中有a、b兩部分,在a、b之間加入一個tab(按一下tab鍵),看一下效果。

學會之後,就可以靈活運用了。

div內文字顯示兩行,超出兩行部分省略號顯示css能實現麼?

5樓:匿名使用者

只能在第一行內顯示省略,不能在第二行內換行

測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試

6樓:匿名使用者

一般用程式呼叫的時候設定字數限制,文字結束後,是顯示省略號的

7樓:雪紅之翼

這個我只能說用css實現不了,提供兩種方法,一是用程式輸出時截字,二是用js判斷字數擷取。

8樓:餅子達人千層餅

用overflow:ellipsis;就可以

div+css怎麼顯示兩行或三行文字,然後多出的部分省略號代替??

9樓:

如果想要在一行裡實現「超出長度顯示省略號」,是可以的。

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

這幾句css就可以,不要加上去的容器一定要寫了寬度的注意:這裡實現的是「超出長度」,而不是「超出字數」,並且在一行裡實現。

如果是兩行或者三行的容器,想要純用css實現這個方法,是沒辦法做到的。

可以提供兩種方法,一是用程式輸出時截字,二是用js判斷字數擷取。

js的demo如下:

10樓:荒野牧羊之殤

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

overflow: hidden;

11樓:屁屁啊哈

各位所說的都是css的排版方式,通常不會關心內容字元的多少,只在內容超出容器大小的時候隱藏而已,更不會好心加上省略號。

lz所說的問題:1、可以用簡單的js方法做到,在頁面裡判斷字串s長度,當超過某個值max時,取s的長max的子串,並在後面合併字串"..."即可,這樣比較方便靈活。

2、在內容未傳到客戶端之前,即對該內容做上述擷取長度的處理,那麼客戶端得到的就是***x.....。這種做法一勞永逸,但是該頁面還要用完整內容的話,則只能再傳一遍啦。

12樓:陸舒傑

這個可以用列表來實現

文字...

文字...<

文字...<

13樓:匿名使用者

在樣式表中加入:overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */

text-overflow:ellipsis;/* 當物件內文字溢位時顯示省略標記(...) ;需與overflow:hidden;一起使用

14樓:貪戀邇的香吻

最簡單的方法就是:

字字字...

字字字...<

字字字...<

15樓:〇輪佪

css的樣式 text-overflow: ellipsis; -o-text-overflow: ellipsis;

相容性不強

16樓:遲暮丶

多行文字超出部分顯示省略號,是可以用 css 解決的

display: -webkit-box;    //將物件作為彈性伸縮盒子模型顯示

-webkit-box-orient: vertical;    //設定或檢索伸縮盒物件的子元素的排列方式

-webkit-line-clamp: 3;    //用來限制在一個塊元素顯示的文字的行數

overflow: hidden;

不過這個用了 webkit 的css 擴充套件屬性,相容性方面,只能適用於 webkit核心瀏覽器 和 移動端了。

其它核心的瀏覽器想做相容的話,可以在 偽類元素 上 考慮下,藉助 after 或者 before 定位到盒子的右下角(注意盒子文字內容的行高和內邊距),內容新增 省略號(content:'...';),如果文字內容 有 英文或者數字混合的話,可以考慮加一點 透明的背景過渡,做一點修飾效果。

17樓:德魯大叔

要是是迴圈出來的資料怎搞?多條資料 id只能一個。。。。。。。

div內文字顯示四行,超出部分省略號顯示css能實現麼

18樓:流年瀟逝

可以實現,加text-overflow是不能實現的,還要加overflow:hidden;white-space:nowrap;text-overflow:

ellipsis;這樣才可以。

19樓:沮喪的傑克

text-overflow:ellipsis; 溢位文字變為省略號

css+div 控制多行文字的顯示,多餘的以省略號顯示 100

20樓:匿名使用者

html參考**,加註釋的部分就是實現多行文字省略的必要屬性。

word-break 屬性規定自動換行的處理方法。normal(使用瀏覽器預設的換行規則。),break-all(允許在單詞內換行。

),keep-all(只能在半形空格或連字元處換行。)

21樓:昌e電腦

如果是單面自己寫的頁面,加直接輸入五行後用省略號。

如果是呼叫資料庫並有**程式,可以**程式的標籤上設定呼叫位元組數。

標籤後用省略號。

22樓:匿名使用者

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 5;

-webkit-box-orient: vertical;

css實現單行,多行文字溢位顯示省略號有順序嗎

23樓:貓小咪的彼岸花

text-overflow屬性僅是註解,當文字溢位時是否顯示省略標記。並不具備其它的樣式屬性定義。我們想要實現溢位時產生省略號的效果。

還必須定義:強制文字在一行內顯示(white-space:nowrap)及溢位內容為隱藏(overflow:

hidden)。只有這樣才能實現溢位文字顯示省略號的效果。

沒有嚴格順序,可以先寫單行,再寫多行文字:

//單行

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

//多行

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

希望對你有幫助,望採納!

css處理文字過長時顯示為多餘部分省略

24樓:依然特雷西

1、新建一個html檔案,命名為test.html。

2、在test.html檔案內,建立一個包含文字的div,並設定div的class屬性為content,主要用於對div進行css樣式設定。

3、在test.html檔案內,對類名為content的div進行樣式設定,**如下。

4、在css內,設定div的寬度為130px,同時設定其浮動向左,居左對齊。

5、在css內,設定div內的文字不換行,當文字超過寬度width時,隱藏文字。

6、在css內,設定div內文字超過寬度時,以點點點代替文字顯示。

25樓:匿名使用者

test-overflow屬性可以定義文字溢位容器時如何顯示,具體用法如下:

text-overflow 屬性規定當文字溢位包含元素時發生的事情。

預設值:clip

語法:text-overflow: clip|ellipsis|string;

允許的值:

clip:修剪文字。

ellipsis:顯示省略符號來代表被修剪的文字。

示例:文字內容超過20px就會顯示為三個點div

26樓:charles大男人

.contentbox1 ul li

.contentbox1 ul li a

photoshop中多行文字能做出相同的漸變效果嗎

好像沒有辦法。除非你自己拉漸變。不過倒是有其他的方法作出一樣的效果。你可以把漸變色變成和文字一樣高的小條。之後複製一下,在每行文字上面都弄這樣一條。複製一行,調整好位置之後再複製,再用編輯 再次變換就可以直接覆蓋下行文字 之後把所有的漸變圖層合併,並修改圖層屬性為 色相 之後選擇文字層,調整文字顏色...

c語言 讀取多行文字問題,如何用c語言讀取文字檔案中的多行資料

1 用fgets函式可以讀取檔案中某行的資料,某列資料就必須一個一個讀入每行的第幾個字元,再存入到一個字串當中。2 例程 include include void main b k 0 printf 第 d行資料 s n i,a printf 第 d列資料 s n j,b fclose fp feo...

請問中多行文字不對齊,除了一行一行刪除空格,怎麼將文字快速對齊

網上覆制的文件一般有很多格式問題等,需要重新整理。方法 1 首先清除版格式。word2007中開始 字型權 清除格式按鈕 2 查詢並替換掉空格 空白區域 3 查詢並替換空行。4 查詢手動換行符替換為段落標記。5 段落中設定段前 段後為0,行距為固定值 設定值為20磅,設定首行縮排。字型中設定字號為四...