css中如何使滑鼠經過過長文字 溢位部分已隱藏為省略號 時全部顯示下劃線 包括省略號在內 ,如圖所示

2021-04-19 21:43:53 字數 5024 閱讀 2733

1樓:匿名使用者

有點麻來煩,有幾個問題:

用css的自text-overflow: ellipsis;顯示省略號ie貌似很好,但

baiff這賤狐du狸精和其他某些賤瀏覽器zhi不支援,只有用dao***:after來新增省略號。網上還有種方法是加個span裡面用三個點的背景圖來模擬省略號,而你上傳的圖應該是ps的你想要的效果,但看不出來你是通過什麼方式弄的省略號出來?

這個問題我沒寫**在幾個瀏覽器下實測,只是腦袋裡面大概想了下,估計要是用text-decoration下劃線的方式來搞定幾大核心,同時實現a:hover狀態連結和省略號都帶下劃線有可能做不到。

你只有試試把a定義成display:block塊級元素後看省略號的點範圍是不是算在塊的長度裡面的,是的話就好辦,用1px的橫線背景圖(長度剛好跟省略號長度一樣)來實現。當a:

hover時出現這個背景圖居下、右對齊不重複就行了。

如果a定義塊級後,省略號不是算在塊裡面的,基本上純css你的問題是無解了,你只有考慮結合js。

另外你這個要求本身意義不大,這種無關緊要的小細節不必花時間去搞

2樓:匿名使用者

多套一層span a:hover span 試試吧在span上做省略號

3樓:匿名使用者

下面的做法可以來給您一些提示自

古古怪怪給剛剛反反覆覆方法快快快太容易

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

4樓:依然特雷西

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

5樓:匿名使用者

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

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

預設值:clip

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

允許的值:

clip:修剪文字。

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

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

6樓:charles大男人

.contentbox1 ul li

.contentbox1 ul li a

如何實現css限制字數,超出部份顯示點點點滑鼠滑過顯示全部

7樓:我命如天不如妖

差不多就這樣,你在調一調,主要就是text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

這三個屬性!

8樓:幾多個你在夢中

試試看試試看試試看試試看試試看試試看試試看試試看試試看試試看試試看

語法:text-overflow : clip | ellipsis

引數:clip :  不顯示省略標記(...),而是簡單的裁切

(clip這個引數是不常用的!)

ellipsis :  當物件內文字溢位時顯示省略標記(...)

說明:設定或檢索是否使用一個省略標記(...)標示物件內文字的溢位。

請您注意,text-overflow:ellipsis屬性在ff中是沒有效果的。

示例:div

text-overflow是一個比較特殊的樣式,我們可以用它代替我們通常所用的標題擷取函式,而且這樣做對搜尋引擎更加友好,如:標題檔案有50 個漢字,而我們的列表可能只有300px的寬度。如果用標題擷取函式,則標題不是完整的,如果我們用css樣式text- overflow:

ellipsis,輸出的標題是完整的,只是受容器大小的侷限不顯示出來罷了。

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

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

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

有的時候的某段文字太長了,會影響整個的佈局,很多人用動態語言來解決這個問題,但必須區分中文和英文,因為中文相當於兩個英文字元長度,這樣不僅繁瑣,而且加重了伺服器的負擔。其實,我們完全可以使用css完美解決這個問題,

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

9樓:江逸塵笑笑

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

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

display: -webkit-box;

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

10樓:匿名使用者

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

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

css樣式如下:

[css]

.css1

.css2

[/css]

html**如下:

[html]

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

.css1

.css2

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

css 一段文字怎麼設定超過省略號顯示

11樓:加百列

單行文字實現方法:

實現效果:

多行文字溢位顯示省略號實現方法:

實現效果:

適用範圍:

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

12樓:劍指長空明德

通常的做法是這樣的:

1、white-space:nowrap;

2、width:100%;

3、overflow:hidden;

4、text-overflow:ellipsis;

5、-o-text-overflow:ellipsis;

還可以通過新增一個-webkit-line-clamp的私有屬性來實現,-webkit-line-clamp是用來限制在一個塊元素顯示的文字的行數。 為了實現這個效果,它需要組合其他的webkit屬性:

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

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

text-overflow: ellipsis 用省略號「…」隱藏超出範圍的文字。

具體**參考如下:

overflow : hidden;text-overflow: ellipsis;display:

-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;

擴充套件資料

適用範圍:

該方法適用範圍廣,但文字未超出行的情況下也會出現省略號,可結合js優化該方法。

將height設定為line-height的整數倍,防止超出的文字露出。

給p::after新增漸變背景可避免文字只顯示一半。

由於ie6-7不顯示content內容,所以要新增標籤相容ie6-7(如:…);相容ie需要將::after替換成:after。

13樓:灰常了

首先你容納文字的容器要設定固定的寬高,然後加上以下屬性white-space: nowrap;

word-break: keep-all;

text-overflow: ellipsis;

第一行的**,是不允許文字換行

第二行的**,是不允許把單詞拆開

第三行的**,就是文字超出容器,以省略號顯示望採納!

14樓:匿名使用者

樣式控制也可以實現的,偏方

首先這個多行是高度寬度

固定的,比如高度是100;寬度200

這裡是內容內容這裡是內容內容這裡是內容內容這裡是內容內容……這個方法是隱藏了多餘的文字,實際上文字不會少,只是給使用者看到的跡象是多的用省略號代替了,這樣的好處是利用seo,壞處是當文字不夠多的話,那就露餡了

15樓:七月的下雨天

我可以肯定的告訴你,想用css的方法做多行文字最後省略號,相容所有瀏覽器,是不可能的。

16樓:匿名使用者

我也想用css來控制多行超出用省略號表示,如果css你會的話,可以教我。如果不會,我可以教你用js或者jquery解決你的問題

17樓:玄魂玉

從來都是根據字元數動態擷取的,或使用js;純css做不到

18樓:子凡

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

//首先這隻它的寬度然後把上面的屬性copy進去

css首字母大寫怎麼設定,css中如何設定英文首字母大寫?

例如 aaaaaaaaaaaa 你直接用多好啊 哪個要大寫 就把東西放在這個標籤裡面 css中如何設定英文首字母大寫?首字母大寫 a 全都 是大寫 b 全都是小寫 c 使用 css text transform 屬性 進行字母大小寫設定。定義和用法 text transform 屬性控制文字的大小寫...

CSS中的div如何巢狀呢?div佈局怎麼巢狀?

不用定位也可以實現。css中定義div1的寬度,將div2的設定為居中,上邊距為10即可 div1 div2這樣實現或者直接 div也可以,如果是用定位,固定兩個div的寬度後定位即可。div1 div2 frameone 不管你怎麼寫innerframe的樣式,他都會在frameone裡,並且相距...

excel中IFISERRORxx如何使用

公式中x應該是一個類似match,lookup,vlookup之類的函式或者公式,為了保證查詢時沒有匹配的就填入空格,否則就返回查詢值 如b2 if iserror vlookup a2,sheet2 a b,2,false vlookup a2,sheet2 a b,2,false 就表示在本表中...