-
實現元素的水平垂直居中
重點看4.5,6方法只是定位加margin的合併版本 -
文本溢出處理
- 單行文本直接使用三件套
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
- 多行文本只做截斷
1)適用於webkit內核瀏覽器及移動端
div{
width: 100px;
height: 3.6rem;
line-height: 1.2rem;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
border: 1px solid;
position: relative;
}
改進:
div::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 80%);
background: -o-linear-gradient(right, transparent, #fff 80%);
background: -moz-linear-gradient(right, transparent, #fff 80%);
background: linear-gradient(to right, transparent, #fff 80%);
}
效果如下圖:
適用範圍:
該方法適用範圍廣,但文字未超出行的情況下也會出現省略號,可結合js優化該方法。
注:
給p::after添加漸變背景可避免文字只顯示一半。
由於ie6-7不顯示content內容,所以要添加標籤兼容ie6-7(如:…);兼容ie8需要將::after替換成:after。
2)看看這個博客中的最後一種方法,值得參考
戳這裏
3. 瀏覽器及其內核
引用自:https://www.cnblogs.com/chenpiaoxiaowu/p/11284021.html
IE瀏覽器,使用Trident瀏覽器內核,又稱爲IE內核。只用於Windows平臺,而且並不是開源的;
chrome瀏覽器,目前使用的是Blink瀏覽器內核。瀏覽器內核的演進過程:Chromium > Webkit > Blink;
Firefox瀏覽器,使用Gecko瀏覽器內核;
Safari瀏覽器,目前使用的是Webkit瀏覽器內核。瀏覽器內核的演進過程:KHTML > Webkit(WebCode + JSCode) > Webkit2;
Opera瀏覽器,目前使用的是Blink瀏覽器內核。瀏覽器內核的演變過程:Presto > Webkit >Blink;