css裡面怎麼讓文字長的時候兩行顯示,最多兩行,多餘的省略號

2021-05-23 16:49:59 字數 4422 閱讀 3268

1樓:幻翼高達

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

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

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

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

2樓:大偉吖

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

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

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

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

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

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

3樓:匿名使用者

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

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

4樓:匿名使用者

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

5樓:雪紅之翼

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

6樓:餅子達人千層餅

用overflow:ellipsis;就可以

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

7樓:

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

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

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

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

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

js的demo如下:

8樓:荒野牧羊之殤

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

overflow: hidden;

9樓:屁屁啊哈

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

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

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

10樓:陸舒傑

這個可以用列表來實現

文字...

文字...<

文字...<

11樓:匿名使用者

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

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

12樓:貪戀邇的香吻

最簡單的方法就是:

字字字...

字字字...<

字字字...<

13樓:〇輪佪

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

相容性不強

14樓:遲暮丶

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

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

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

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

overflow: hidden;

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

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

15樓:德魯大叔

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

css 超出兩行顯示省略號有什麼辦法?

16樓:匿名使用者

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

17樓:

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

18樓:匿名使用者

就是來比如有一行文源

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

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

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

19樓:匿名使用者

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

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

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

20樓:昌e電腦

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

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

標籤後用省略號。

21樓:匿名使用者

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 5;

-webkit-box-orient: vertical;

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

22樓:依然特雷西

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

23樓:匿名使用者

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

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

預設值:clip

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

允許的值:

clip:修剪文字。

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

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

24樓:charles大男人

.contentbox1 ul li

.contentbox1 ul li a

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

25樓:匿名使用者

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

權....#id

CSS怎麼讓文字居中,html css怎麼讓文字在頁面底部居中

小夥伴們用彈性佈局的時候 是不是總是控制不好呢?那是因為你還沒有了解彈性佈局的精髓 讓文字居中的最主要的標籤就是text align center 如果你還有別的文字居中的需求,可以通過margin 0 auto來控制文字所在層的居中。1 text align的值與說明 text align語法 t...

css怎麼讓文字多後自動縮小不讓他換行

目前baicss沒有這種功能,而du 且如果真能多了就自動縮小zhi的dao話,文字大小不專一不是更難看麼?屬 可以做到的是text overflow ellipsis 讓多出來的部分變成省略號,然後在title上提示完整文字內容 如何用css實現不能自動換行,如果文字過長,省略,用 替代?比如給s...

在css中怎樣讓文字的背景色透明

設定元素的透明度 moz opacity 0.8 在firefox中設定元素透明度 filter alpha opacity 80 ie使用濾鏡設定透明 但是當我們對一個標籤設定背景的透明度時,往往我們並不希望該標籤上的文字 也變成半透明瞭。例如 不透明 div可以很明顯的看出文字也被半透明的,這是...