CSS2-3常見的demo列子總結一
阿新 • • 發佈：2017-07-18
d3d vb6 add 文本 ont 遭遇 gbk def 高度 分針網每日分享：CSS2-3常見的demo列子總結一
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 
ellipsis：當對象內文本溢出時顯示省略標記（...）。
二：white-space：normal | pre | nowrap | pre-wrap | pre-line 默認值為normal
normal：默認處理方式。
pre：用等寬字體顯示預先格式化的文本，不合並文字間的空白距離，當文字超出邊界時不換行。可查閱pre對象 
如上的解決方案是針對webkit瀏覽器或者移動端來做的。
2. css圖片未知高度垂直居中完美解決方案。
方法1. css圖片未知高度在標準瀏覽器下垂直居中.
該方法的實現方式是將外部容器顯示模式設置成display:table;img標簽外部再套一個容器，並對該容器設置顯示模式為display:table-cell; 類似與表格的顯示方式，且不要使用float等屬性，但是在IE6、IE7下是不支持的；如下代碼：
<ul class="list">
<li>
<img src="m1.jpg"/>
</li>
</ul>
<ul class="list">
<li>
<img src="m2.jpg"/>
</li>
<ul>
CSS代碼如下：
<style>
*{margin:0;padding:0;}
ul,li{list-style:none;}
.list {
float:left;
margin:20px;
width:250px;
height:150px;
display:table;
text-align:center;
border:1px solid #d3d3d3;
}
.list li{
display:table-cell;
vertical-align:middle;
}
</style>
效果截圖如下：
針對IE6，IE7的解決方案是使用定位的方式；我們可以使用父容器使用相對定位，對img的外層容器使用絕對定位 top:50%;left:50%;然後再對img元素定位top:-50%;left:-50%;即可，代碼如下：
<style>
*{margin:0;padding:0;}
ul,li{list-style:none;}
.list {
*position:relative;
float:left;
margin:20px;
width:250px;
height:150px;
display:table;
text-align:center;
border:1px solid #d3d3d3;
}
.list li{
display:table-cell;
vertical-align:middle;
*position:absolute;
*left:50%;
*top:50%;
}
.list li img{
position:relative;
*left:-50%;
*top:-50%;
}
</style>
效果如下演示：
方法2. css圖片未知高度在標準瀏覽器下垂直居中.
下面我們是使用css的hack的解決方案，我們首先來看看標準瀏覽器下；比如現在的HTML代碼如下：
<ul class="list">
<li>
<img src="m1.jpg"/>
</li>
</ul>
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代碼改成如下：
<style>
*{margin:0;padding:0;}
ul,li{list-style:none;}
.list {
position:relative;
margin:20px;
width:250px;
height:150px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;
}
.list li{
*position:absolute;
*top:50%;
}
.list li img{
*position:relative;
*top:-50%;
*left:-50%;
}
</style>
IE6截圖如下：
這個方法有一個缺點是：對父級容器使用display:table-cell, 因此不能同時使用margin或者float屬性等。
方法3. css圖片未知高度在標準瀏覽器下垂直居中.
在標準瀏覽器下外部容器還是使用顯示模式設置為display:table-cell; IE6/7下利用img標簽的前面插入一對空標簽的方法；如下代碼：
<ul class="list">
<li>
<i></i><img src="m1.jpg"/>
</li>
</ul>
CSS代碼如下：
<style>
*{margin:0;padding:0;}
ul,li{list-style:none;}
.list {
width:250px;
height:150px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;
}
.list i{
*display: inline-block;
*height:100%;
*vertical-align:middle;
}
.list li img{
*vertical-align:middle;
}
</style>
在IE6下顯示效果還是如下：
方法4. css圖片未知高度在標準瀏覽器下垂直居中.
該方法對標準瀏覽器下還是使用上面的display:table-cell來解決，但是針對IE6或者7的話，將圖片外部容器的字體大小設置成該高度的0.873倍就可以實現居中，如下HTML代碼：
<ul class="list">
<li>
<img src="m1.jpg"/>
</li>
</ul>
Css代碼如下：
<style>
*{margin:0;padding:0;}
ul,li{list-style:none;}
.list {
width:250px;
height:150px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;
/* 兼容IE6或者7 */
*display:block;
*font-size:131px; /* 字體大小約為容器高度的0.873倍 150*0.873 = 349 */
*font-family:Arial; /* 防止非utf-8引起的hack失效問題，如gbk編碼 */
}
</style>
效果如下：
本文轉自：http://www.f-z.cn/id/289
我們下面來理解 text-overflow 和 white-space 2個屬性；
一：text-overflow屬性 clip | ellipsis 默認值clip
ellipsis：當對象內文本溢出時顯示省略標記（...）。
二：white-space：normal | pre | nowrap | pre-wrap | pre-line 默認值為normal
normal：默認處理方式。
pre：用等寬字體顯示預先格式化的文本，不合並文字間的空白距離，當文字超出邊界時不換行。可查閱pre對象- display: -webkit-box; 將對象作為彈性伸縮盒子模型顯示。
- -webkit-box-orient: vertical; 設置或檢索伸縮盒子對象的子元素的排列方式。
- text-overflow:ellipsis; 指定多行文本的情況下，使用省略號顯示超出範圍的文本。
- -webkit-line-clamp: 2; 含義是超出2行後的文字 使用省略號來顯示；
如上的解決方案是針對webkit瀏覽器或者移動端來做的。
2. css圖片未知高度垂直居中完美解決方案。
方法1. css圖片未知高度在標準瀏覽器下垂直居中.
該方法的實現方式是將外部容器顯示模式設置成display:table;img標簽外部再套一個容器，並對該容器設置顯示模式為display:table-cell; 類似與表格的顯示方式，且不要使用float等屬性，但是在IE6、IE7下是不支持的；如下代碼：
<ul class="list">
<li>
<img src="m1.jpg"/>
</li>
</ul>
<ul class="list">
<li>
<img src="m2.jpg"/>
</li>
<ul>
CSS代碼如下：
<style>
*{margin:0;padding:0;}
ul,li{list-style:none;}
.list {
float:left;
margin:20px;
width:250px;
height:150px;
display:table;
text-align:center;
border:1px solid #d3d3d3;
}
.list li{
display:table-cell;
vertical-align:middle;
}
</style>
效果截圖如下：
針對IE6，IE7的解決方案是使用定位的方式；我們可以使用父容器使用相對定位，對img的外層容器使用絕對定位 top:50%;left:50%;然後再對img元素定位top:-50%;left:-50%;即可，代碼如下：
<style>
*{margin:0;padding:0;}
ul,li{list-style:none;}
.list {
*position:relative;
float:left;
margin:20px;
width:250px;
height:150px;
display:table;
text-align:center;
border:1px solid #d3d3d3;
}
.list li{
display:table-cell;
vertical-align:middle;
*position:absolute;
*left:50%;
*top:50%;
}
.list li img{
position:relative;
*left:-50%;
*top:-50%;
}
</style>
效果如下演示：
方法2. css圖片未知高度在標準瀏覽器下垂直居中.
下面我們是使用css的hack的解決方案，我們首先來看看標準瀏覽器下；比如現在的HTML代碼如下：
<ul class="list">
<li>
<img src="m1.jpg"/>
</li>
</ul>
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代碼改成如下：
<style>
*{margin:0;padding:0;}
ul,li{list-style:none;}
.list {
position:relative;
margin:20px;
width:250px;
height:150px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;
}
.list li{
*position:absolute;
*top:50%;
}
.list li img{
*position:relative;
*top:-50%;
*left:-50%;
}
</style>
IE6截圖如下：
這個方法有一個缺點是：對父級容器使用display:table-cell, 因此不能同時使用margin或者float屬性等。
方法3. css圖片未知高度在標準瀏覽器下垂直居中.
在標準瀏覽器下外部容器還是使用顯示模式設置為display:table-cell; IE6/7下利用img標簽的前面插入一對空標簽的方法；如下代碼：
<ul class="list">
<li>
<i></i><img src="m1.jpg"/>
</li>
</ul>
CSS代碼如下：
<style>
*{margin:0;padding:0;}
ul,li{list-style:none;}
.list {
width:250px;
height:150px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;
}
.list i{
*display: inline-block;
*height:100%;
*vertical-align:middle;
}
.list li img{
*vertical-align:middle;
}
</style>
在IE6下顯示效果還是如下：
方法4. css圖片未知高度在標準瀏覽器下垂直居中.
該方法對標準瀏覽器下還是使用上面的display:table-cell來解決，但是針對IE6或者7的話，將圖片外部容器的字體大小設置成該高度的0.873倍就可以實現居中，如下HTML代碼：
<ul class="list">
<li>
<img src="m1.jpg"/>
</li>
</ul>
Css代碼如下：
<style>
*{margin:0;padding:0;}
ul,li{list-style:none;}
.list {
width:250px;
height:150px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;
/* 兼容IE6或者7 */
*display:block;
*font-size:131px; /* 字體大小約為容器高度的0.873倍 150*0.873 = 349 */
*font-family:Arial; /* 防止非utf-8引起的hack失效問題，如gbk編碼 */
}
</style>
效果如下：
本文轉自：http://www.f-z.cn/id/289
CSS2-3常見的demo列子總結一