當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS2-3常见的demo列子总结

發布時間：2023/12/4 CSS 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS2-3常见的demo列子总结小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS2-3常見的demo列子總結

閱讀目錄

1. css超過一行或者多行后顯示省略號。
2. css圖片未知高度垂直居中完美解決方案。
3. 學習使用 :before和 :after偽元素

回到頂部

1. css超過一行或者多行后顯示省略號。

Css實現超過一行后顯示省略號；代碼如下：

<p style="width:200px;white-space: nowrap;text-overflow:ellipsis;overflow:hidden;">我武漢東方店hi肉肉肉團阿斯達薩頂頂發感染他人山東省地方反而</p>

效果如下：

我們下面來理解?text-overflow?和?white-space?2個屬性；

一：text-overflow屬性??clip?|?ellipsis?默認值clip

? clip：當對象內文本溢出時不顯示省略標記（...），而是將溢出的部分裁切掉。

<p?style="width:200px;white-space:?nowrap;text-overflow:clip;overflow:hidden;">我武漢東方店hi肉肉肉團阿斯達薩頂頂發感染他人山東省地方反而</p>??

效果如下：

? ellipsis：當對象內文本溢出時顯示省略標記（...）。

二：white-space：normal?|?pre?|?nowrap?|?pre-wrap?|?pre-line?默認值為normal

?normal：默認處理方式。

? pre：用等寬字體顯示預先格式化的文本，不合并文字間的空白距離，當文字超出邊界時不換行。可查閱pre對象

? nowrap：強制在同一行內顯示所有文本，直到文本結束或者遭遇br對象。

? pre-wrap：用等寬字體顯示預先格式化的文本，不合并文字間的空白距離，當文字碰到邊界時發生換行。

? pre-line：保持文本的換行，不保留文字間的空白距離，當文字碰到邊界時發生換行。

含義：使用text-overflow:ellipsis?和?white-space:?nowrap?的含義是：把文本限制在一行(white-space:nowrap),?這一行是有限制的(因此需要設置width),?并且當內容溢出來的時候需要隱藏(overflow:hidden),然后出現省略號(text-overflow:ellipsis);

?2. Css實現超過指定的行數后顯示省略號；

我們看看webkit瀏覽器或者移動端瀏覽器的情況；在webkit瀏覽器中我們可以直接使用webkit的css的擴展屬性(也是私有屬性)?–webkit-line-clamp;?注意：這個屬性不屬于css規范當中的屬性。但是需要如下屬性結合使用：

display:?-webkit-box;?將對象作為彈性伸縮盒子模型顯示。

-webkit-box-orient:?vertical;?設置或檢索伸縮盒子對象的子元素的排列方式。

text-overflow:ellipsis;?指定多行文本的情況下，使用省略號顯示超出范圍的文本。

-webkit-line-clamp:?2;?含義是超出2行后的文字?使用省略號來顯示；

如下demo代碼：

<p?style="width:200px;text-overflow:ellipsis;display:?-webkit-box;-webkit-line-clamp:?2;-webkit-box-orient:?vertical;overflow:hidden;">我武漢東方店hi肉肉肉團阿斯達薩頂頂發感染他人山東省地方反而</p>

頁面顯示效果如下：

如上的解決方案是針對webkit瀏覽器或者移動端來做的。

回到頂部

2. css圖片未知高度垂直居中完美解決方案。

方法1.?css圖片未知高度在標準瀏覽器下垂直居中.

該方法的實現方式是將外部容器顯示模式設置成display:table;img標簽外部再套一個容器，并對該容器設置顯示模式為display:table-cell;?類似與表格的顯示方式，且不要使用float等屬性，但是在IE6、IE7下是不支持的；如下代碼：

CSS代碼如下：

效果截圖如下：

針對IE6，IE7的解決方案是使用定位的方式；我們可以使用父容器使用相對定位，對img的外層容器使用絕對定位?top:50%;left:50%;然后再對img元素定位top:-50%;left:-50%;即可，代碼如下：

效果如下演示：

方法2.?css圖片未知高度在標準瀏覽器下垂直居中.

下面我們是使用css的hack的解決方案，我們首先來看看標準瀏覽器下；比如現在的HTML代碼如下：

Css代碼如下：

*{margin:0;padding:0;} ul,li{list-style:none;} .list {margin:20px;width:250px;height:150px;display:table-cell;text-align:center;vertical-align:middle;border:1px solid #d3d3d3; }

在標準瀏覽器顯示效果如下：

在IE6下如下：

下面我們使用定位的方式對IE6，7下的居中對齊修復；如下我們的css代碼改成如下：

IE6截圖如下：

這個方法有一個缺點是：對父級容器使用display:table-cell,?因此不能同時使用margin或者float屬性等。

方法3.?css圖片未知高度在標準瀏覽器下垂直居中.

在標準瀏覽器下外部容器還是使用顯示模式設置為display:table-cell;?IE6/7下利用img標簽的前面插入一對空標簽的方法；如下代碼：

CSS代碼如下：

在IE6下顯示效果還是如下：

方法4.?css圖片未知高度在標準瀏覽器下垂直居中.

該方法對標準瀏覽器下還是使用上面的display:table-cell來解決，但是針對IE6或者7的話，將圖片外部容器的字體大小設置成該高度的0.873倍就可以實現居中，如下HTML代碼：

Css代碼如下：

效果如下：

回到頂部

3. 學習使用 :before和 :after偽元素

偽元素?顧名思義?就是創建了一個虛假元素，并插入到目標元素之前或者之后。這兩個偽類下特有的屬性content，用于在css渲染中頭部和尾部添加內容，偽元素必須與content結合來使用，否則毫無意義，但是添加的內容不會改變文檔的內容，不會出現在DOM結構中，僅僅是對用戶是可見的，但是對DOM結構是不可見的。比如如下代碼：

<div?class="example">example</div>

CSS代碼如下：

.example:before{content:"#"; }.example:after{content: "@"; }

在頁面上被渲染成如下內容：

#example@

二：指定個別元素不進行插入

針對這個問題，content還有一個屬性none，含義是不需要為該元素有任何內容；比如如下代碼：

<div class="example">example</div> <div class="example sample">example</div> <div class="example">example</div>

首先我對所有example類名前面添加#號，后面添加@符合，然后我對包含sample類名的前面和后面不添加任何符合代碼如下：

.example:before{content:"#"; } .example:after{content: "@"; } .sample:before{content: none } .sample:after{content: none }

三：插入圖像文件

我們不僅可以使用before或者after選擇器的在前面或者后面插入文字外，我們還可以插入圖像文件，插入圖像文件時，需要使用url屬性值來指定圖像的路徑，比如如下代碼：

<div class="example">example</div> <div class="example sample">example</div> <div class="example">example</div>

CSS代碼如下：

.example:before{content:url("https://img.alicdn.com/tps/TB1sb2HJVXXXXXAXpXXXXXXXXXX-120-55.png_120x120.jpg");} .example:after{content: "@"; }

效果如下：

可以看到，在前面插入了一個圖片。

瀏覽器支持程度：firefox，chrome，safari，opera，IE8+等瀏覽器。

2. 使用content屬性來插入項目編號

<元素>:?before?{content:counter(計算器名)}

并且需要在元素的樣式中追加對元素的counter-increment屬性的指定。

注意：計數器名可以任意寫，但是counter-increment指定的名字要相同。

如下代碼：

<h1>我想解決單身問題</h1> <p>可惜我不帥...沒有女孩喜歡我....</p> <h1>我想解決單身問題</h1> <p>可惜我不帥...沒有女孩喜歡我....</p> <h1>我想解決單身問題</h1> <p>可惜我不帥...沒有女孩喜歡我....</p>

Css代碼如下：

h1:before{content:counter(mycounter)".";} h1{counter-increment:mycounter;}

效果如下：

瀏覽器支持程度：ie8+,chorme,firefox等；

3. 在項目編號中追加文字；

HTML代碼還是如上

css代碼如下:

h1:before{content:"第"counter(mycounter)"章"".";} h1{counter-increment:mycounter;}

效果如下：

我們還可以指定編號的樣式，我想讓顏色變為紅色，字體大小為18px，如下代碼：

h1:before{content:"第"counter(mycounter)"章"".";color:red;font-size:18px;}h1{counter-increment:mycounter;}

效果如下：

指定編號種類

使用before選擇器或者after選擇器中的content屬性，我們不僅可以追加數字編號，我們還可以追加字母編號或者羅馬數字編號，如下方法指定：

content:?counter(計算器名，編號種類)

比如指定大寫字母編號時，使用”upper-alpha”屬性，指定大寫羅馬字母時，使用”upper-roman”屬性。

如下css代碼：

h1:before{content:counter(mycounter,upper-alpha);color:red;font-size:36px;} h1{counter-increment:mycounter;} p:before{content:counter(longen,upper-roman);color:blue;font-size:36px;} p{counter-increment:longen;}

效果如下：

編號嵌套：

可以在大編號中嵌套中編號，可以在中編號中嵌套小編號。如下代碼：

<h1>我想解決單身問題</h1> <h2>可惜我不帥...沒有女孩喜歡我....</h2> <h2>我想解決單身問題</h2> <h1>可惜我不帥...沒有女孩喜歡我....</h1> <h2>我想解決單身問題</h2> <h2>可惜我不帥...沒有女孩喜歡我....</h2>

Css代碼如下：

h1:before{content:counter(mycounter)".";} h1{counter-increment:mycounter;}h2:before{content:counter(longen);} h2{counter-increment:longen;margin-left:40px;}

效果如下：

在上面代碼中，6個中標題的編號是連續的，如果要將第二個大標題里中標題重新開始編號的話，需要在大標題中使用counter-reset屬性將中編號進行重置。如下代碼：

h1:before{content:counter(mycounter)".";} h1{counter-increment:mycounter;counter-reset:longen;}h2:before{content:counter(longen);} h2{counter-increment:longen;margin-left:40px;}

如下效果：

我們再來看一個復雜一點的多層嵌入的demo，如下：

CSS代碼如下：

h1:before{content:counter(mycounter)".";} h1{counter-increment:mycounter;counter-reset:subcounter;}h2:before{content:counter(mycounter) '-' counter(subcounter)'.';} h2{counter-increment:subcounter;counter-reset:subsubcounter;margin-left:40px;color:red;} h3:before{content:counter(mycounter) '-' counter(subcounter) '-' counter(subsubcounter) '.';} h3{counter-increment:subsubcounter;margin-left:40px;color:blue;}

效果如下：

在字符串兩邊添加嵌套文字符號

可以使用content屬性的open-quote屬性值與close-quote屬性值在字符串兩邊添加如：括號，單引號，雙引號之類的嵌套文字符號，open-quote屬性值用于添加開始的嵌套文字符號，close-quote屬性值用于添加結尾的嵌套文字符號。

Css代碼：

h1:before{content:open-quote;} h1:after{content:close-quote;} h1{quotes:"(" ")"}h2:before{content:open-quote;} h2:after{content:close-quote;} h2{quotes:"\"" "\""}h3:before{content:open-quote;} h3:after{content:close-quote;}h3{quotes:'\'' '\''}

截圖如下：

其中雙引號和單引號需要使用轉義字符?“\”進行轉義。

總結

以上是生活随笔為你收集整理的CSS2-3常见的demo列子总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：在此之前的软件系统做开发—需求的研究框架
下一篇： CSS 基本样式