頁面實現兩行展示,超出部分顯示省略號

2021-04-14 14:42:51 字數 5206 閱讀 5811

1樓:匿名使用者

樣式中增加乙個#id樣式。 200px是控制長度,版-webkit-line-clamp: 2;是2行就溢位省略

權....#id

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

2樓:匿名使用者

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

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

3樓:匿名使用者

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

4樓:雪紅之翼

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

5樓:餅子達人千層餅

用overflow:ellipsis;就可以

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

6樓:

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

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

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

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

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

js的demo如下:

7樓:荒野牧羊之殤

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

overflow: hidden;

8樓:屁屁啊哈

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

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

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

9樓:陸舒杰

這個可以用列表來實現

文字...

文字...<

文字...<

10樓:匿名使用者

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

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

11樓:貪戀邇的香吻

最簡單的方法就是:

字字字...

字字字...<

字字字...<

12樓:〇輪佪

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

相容性不強

13樓:遲暮丶

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

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

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

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

overflow: hidden;

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

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

14樓:德魯大叔

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

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

15樓:幻翼高達

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

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

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

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

16樓:大偉吖

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

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

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

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

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

html怎樣讓超出的內容顯示為省略號

17樓:江逸塵笑笑

如果是塊元素的話,大家在css那個塊中新增這幾行**吧(這是多行的文字隱藏加省略號,比較通用)

overflow: hidden;/*自動隱藏文字*/text-overflow: ellipsis;/*文字隱藏後新增省略號*/

display: -webkit-box;

-webkit-line-clamp:2; /*想要顯示的行數*/-webkit-box-orient: vertical;

18樓:匿名使用者

文字超出了需要隱藏並顯示省略號這個在工作中很多時候都要用到,我想很多人都碰到過吧,這個有兩種解決方法

一是用程式開擷取字元長度,這個其實也是可以的第二種是用樣式來做,這裡主要介紹一下用樣式怎麼來做吧,我話也不多說了吧直接上**吧,

css樣式如下:

[css]

.css1

.css2

[/css]

html**如下:

[html]

web前端開發 – 專注於**前端設計與web使用者體驗web前端開發 – 專注於**前端設計與web使用者體驗[/html]

.css1

.css2

web前端開發 – 專注於**前端設計與web使用者體驗web前端開發 – 專注於**前端設計與web使用者體驗

想用css做乙個文字在兩行顯示 有固定寬高 超出顯示省略號 我看的用強制一行的可以顯示省略號兩行就不行了 5

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 超出兩行顯示省略號有什麼辦法?

23樓:匿名使用者

這個單純css做不了,要在後台程式控制,css最多能控制單行省略號

24樓:

不清楚 css3 中是否能實現,但 css2 是無法實現的。解決的方法可以用 js。

25樓:匿名使用者

就是來比如有一行文源

字,很長bai,**du內zhi一行顯示不dao下.

excel怎麼凍結前兩行不動,如何凍結電子表格的前兩行

1 首先開啟excel 在 中輸入資料,需要將前兩行資料保持不動。2 將滑鼠游標點選在第三行的位置,將第三行整行選中。3 然後點選 上方工具欄中的 檢視 選項,並點選 凍結窗格 中的第乙個選項。4 滾動滑鼠滾輪將頁面向下翻,即可發現 的前兩行沒有移動。單擊行標3 選擇第三行 檢視 凍結窗格 凍結拆分...

excel中如何分兩行顯示工具欄

excel 2003及其之前的可以,2007及以上好像不行。巧用快速訪問工具欄,會省事很多。看看我的,常用功能都在這裡了,絕大部分時間我都是 功能區最小化 的。這個是可以拖動的。用滑鼠點住工具欄的最前端,拖動後放到想放的位置即可。滑鼠右擊工具欄,選自定義,在選項標籤裡設定 excel 工具欄怎麼顯示...

誰能告訴我如何把exel前兩行凍結

以2010版為例 選中第三行,選擇檢視選項卡上,視窗中的 凍結拆分窗格 即將第一 二行固定住了。你這個可以還可以選擇凍結首行。如果想行列都固定,需要選擇行 列交叉的單元格來拆分窗格。如選擇b2單元格後,點選凍結拆分窗格,那麼就將a列 第一行固定住 了。比較來看,03版的操作要比10版方便些。檢視 視...