CSS實現文字顯示部分內容,多餘文字顯示省略號

2021-08-08 21:57:01 字數 929 閱讀 1980

1.顯示一行文字內容,多餘的內容用省略號顯示

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

2.顯示指定行數的文字,多餘的內容顯示省略號

display: -webkit

-box;

-webkit

-box

-orient: vertical;

-webkit

-line

-clamp: 3;

overflow: hidden;

-webkit-line-clamp用來限制在乙個塊元素顯示的文字的行數。 為了實現該效果,它需要組合其他的webkit屬性。常見結合屬性:

display: -webkit-box; 必須結合的屬性 ,將物件作為彈性伸縮盒子模型顯示 。

-webkit-box-orient 必須結合的屬性 ,設定或檢索伸縮盒物件的子元素的排列方式 。

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

3.相容其他瀏覽器的實現方法

使用偽元素的方法實現,偽元素的只適合文字絕對會被省略的情況,文字未超出行的情況下也會出現省略號,可結合js優化該方法。

p 

p::after

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

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

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

CSS部分內容

一.css部分內容 引入 1 行間樣式 關鍵字style 2 內嵌樣式 關鍵字style 3 外聯樣式 關鍵字 link 選擇器 id選擇器 class選擇器 後代選擇器 父元素 子元素 子代選擇器 父元素 子元素 多種 組合選擇器 元素1,元素2,偽類選擇器 元素 hover 滑鼠移動到元素上時的...

jsp 遺漏部分內容

1.web inf 目錄的檔案外界不能直接訪問,因此可以通過把一些後台的jsp檔案放在web inf 資料夾中以提高安全性.同時可以通過程式配置去訪問這些頁面,在 web.xml中作出一定的配置即可.頁面部分 可以通過 config 內建物件獲取配置在 web.xml中的值 string user ...

牛腩 7 關於 CSS 的部分內容

css特點 實現網頁內容與樣式的分離 css選擇器優先順序 id選擇器 special 類選擇器 menu title html標籤選擇器 body css核心內容 標準流 合資模型 浮動 定位 塊級元素 行內元素 html 內容端 1 欄目一欄目二 欄目三wangchuan6688 html 內容...