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

2021-05-15 21:03:29 字數 5857 閱讀 7390

1樓:

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

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

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

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

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

js的demo如下:

2樓:荒野牧羊之殤

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

overflow: hidden;

3樓:屁屁啊哈

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

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

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

4樓:陸舒傑

這個可以用列表來實現

文字...

文字...<

文字...<

5樓:匿名使用者

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

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

6樓:貪戀邇的香吻

最簡單的方法就是:

字字字...

字字字...<

字字字...<

7樓:〇輪佪

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

相容性不強

8樓:遲暮丶

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

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

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

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

overflow: hidden;

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

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

9樓:德魯大叔

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

div+css怎麼顯示兩行或三行文字,然

10樓:言言言小魚

多行文字顯示省略

號方法:

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3; //文字行數overflow: hidden;

適用範圍:

因使用了webkit的css擴充套件屬性,該方法適用於版webkit瀏覽器及移動權端。

11樓:god_like哈兒

jq用字串擷取substr();

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

12樓:匿名使用者

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

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

13樓:匿名使用者

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

14樓:雪紅之翼

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

15樓:餅子達人千層餅

用overflow:ellipsis;就可以

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

16樓:匿名使用者

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

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

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

17樓:昌e電腦

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

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

標籤後用省略號。

18樓:匿名使用者

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 5;

-webkit-box-orient: vertical;

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

19樓:丶人賤合一丶

可以,不過只適合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;

20樓:匿名使用者

也是這個問題,搞定了。

//單行

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

//多行

display: -webkit-box;

-webkit-box-orient: vertical;

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

21樓:豆芽君

在css樣式中加入

width:100px; //你所要

的寬度white-space:nowrap;

text-overflow:ellipsis;

-o-text-overflow:ellipsis;

overflow: hidden;

22樓:

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

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

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

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

css裡面怎麼讓文字長的時候兩行顯示,最多兩行,多餘的省略號顯示,最重要的是支援ie瀏覽器,

23樓:幻翼高達

需要準備的材料分別有:電腦、瀏覽器、html編輯器。

1、首先,開啟html編輯器,新建html檔案,例如:index.html。

2、在index.html中的標籤中,輸入css**:

div3、瀏覽器執行index.html頁面,此時文字超過2行會自動把多餘部分用省略號顯示 。

24樓:大偉吖

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

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

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

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

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

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

25樓:依然特雷西

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內文字超過寬度時,以點點點代替文字顯示。

26樓:匿名使用者

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

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

預設值:clip

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

允許的值:

clip:修剪文字。

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

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

27樓:charles大男人

.contentbox1 ul li

.contentbox1 ul li a

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

28樓:流年瀟逝

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

ellipsis;這樣才可以。

29樓:沮喪的傑克

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

三行情書,兩行眼淚,一行愛情是什麼意思

可以分為3個層次 1 江山自古多嬌,引無數英雄盡折腰2 英雄難過美人關 3 江山和美人哪個重要?然後你就可以自己發揮了啊!祝你好運 這個三 書是什麼意思 我覺得應該是 本來空蕩蕩的人生,有了你,就變得完滿了。null在程式中表示空的沒有值,第二行 u you,第三行 full 滿。就是這個意思.只要...

愛只需一行但如果你要兩行我會給你三行這句話是什麼意思

愛只需要一行,但如果你想要兩行,我會給你三行 一行在心裡 一行在夢裡 一行你你你 加上一樓的註解,明瞭了吧?表達了一個人對他戀愛物件深長的愛,簡單的說就是承諾自己會做的比對方想象的還好。願你比別人更不怕一個人獨處願你日後想起時你會被自己感動 幹一行,愛一行 vs 愛一行,幹一行 辯論賽 我是正方 幹...

求助flex兩行無限列或css兩行無限列

兩列橫來向限自載入框 架沒width 100 fblc zh j ul 種實現相容ie8 用flex寫css第二行不起作用 5 從顏色來看沒有被識別為屬性,你考慮加一下字首,webkit 這一系列的試試 css flex 怎麼獨佔1行 父容器獨佔還是子獨佔?父容器獨佔設成塊,不行就寬度100 字元素...