css能實現二行或二行以上超出字數後用省略號代替嗎

2021-04-14 14:42:54 字數 3984 閱讀 1406

1樓:悄悄de愛上

不可能實現的,css就是控制樣式的而已。

即使是css3也是沒辦法的。

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

2樓:匿名使用者

在css樣式中寫入如下**:

overflow:hidden;

text-overflow:ellipsis;

-o-text-overflow: ellipsis;

white-space:nowrap;

width:100%;

3樓:清夜悠悠

試試這樣行不

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

overflow: hidden;

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

4樓:

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

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

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

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

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

js的demo如下:

5樓:荒野牧羊之殤

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

overflow: hidden;

6樓:屁屁啊哈

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

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

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

7樓:陸舒傑

這個可以用列表來實現

文字...

文字...<

文字...<

8樓:匿名使用者

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

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

9樓:貪戀邇的香吻

最簡單的方法就是:

字字字...

字字字...<

字字字...<

10樓:〇輪佪

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

相容性不強

11樓:遲暮丶

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

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

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

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

overflow: hidden;

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

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

12樓:德魯大叔

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

如何用css實現不能自動換行,如果文字過長,省略,用」…」替代?

13樓:慕刓辭

比如給span標籤實現問題效果:

給span新增如下css:

span

14樓:我的人生

最好是用塊級元素,父級必須得有個寬度,如果不設定,列如移動端會出現橫向滾動條

舉例:內容描述

white-space:nowrap;    //代表文字不自動換行overflow:hidden;          //代表溢位隱藏text-overflow:

ellipsis;   //代表溢位省略號

很好用的,一般只設定溢位隱藏會出現擷取一般的字,用這個屬性就不會了,溢位會出現...

15樓:亞亞女孩

許國柱許國柱許國柱許國柱許國柱許國柱許國柱許國柱許國柱

16樓:匿名使用者

像你說的那種情況,應該用程式進行控制,提取前多少個位元組,css我認為不能實現!

css怎麼讓第二行內容顯示不下的時候自動省略號!

17樓:匿名使用者

你好,你好,你好,你好,你好,你好,你好,你好,

你好,你好,你好,你好,你好,你好,你好,你好,

你好,你好,你好,你好,你好,你好,你好,你好,

18樓:言言言小魚

單純的css只能實現一行顯示不下的時候顯示省略號,如果是多行的話,就需要用js實現了。

19樓:你好呀

white-space: initial;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

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

20樓:匿名使用者

不可以,text-overflow: ellipse; 只在一行時起作用,兩行需要用 js 做字串擷取並新增省略號

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

21樓:幻翼高達

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

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

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

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

22樓:大偉吖

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

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

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

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

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

在裡怎麼實現第二行縮排字元第三四行縮排

傳統做法是用空格鍵形成的段落首行縮排2個字元,這樣的方法在遇到段落比較多的時候無疑變得成頭疼,解決方法為 1 在 工具 選單下選擇開啟 選項 對話方塊。2 選中 使用字元單位 後確認。3 選擇要首行縮排兩個字元的段落後右擊,在彈出的選單裡選擇 段落 開啟 段落 對話方塊。4 在特殊格式裡選擇 首行縮...

能求的這個行列式第一行21343第二行

2 1 3 4 3 5 1 2 1 2 3 1 4 2 5 4 1 0 5 c2 12 消去du分數,注意行列式 zhi最後值dao要乘 1 12 2 4 4 3 5 6 1 2 3 3 2 5 4 12 0 5 依次做版 r1 2r3,r3 2r1 4 2 0 7 5 6 1 2 7 15 0 9...

第二行不能縮排怎麼辦,word第二行不能縮排怎麼辦

選中需要調整的段落文字或定位到需要調整的段落。開啟段落對話方塊,縮排 左側 縮排中輸入相應的值,可根據預覽情況而定。確定即可調整。word中段落第二行縮排不能調 將游標放置在第二行首個文字的前面,然後按下回車鍵即可,同時也可嘗試在第一行末尾按下回車鍵,望採納,謝謝 第一行末尾要按回車鍵換行,再輸入第...