一、對於div強制換行
1.（IE瀏覽器）white-space:normal; word-break:break-all;這裡前者是遵循標準。
#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}

2.（Firefox瀏覽器）white-space:normal; word-break:break-all;overflow:hidden;

同樣的FF下也沒有很好的實現方法，只能隱藏或者加滾動條，當然不加滾動條效果更好！
#wrap{white-space:normal; width:200px; overflow:auto;}
或者
#wrap{word-break:break-all;width:200px; overflow:auto; }

二、對於table強制換行
1. (IE瀏覽器)使用樣式table-layout:fixed；

2.(IE瀏覽器)使用樣式table-layout:fixed與nowrap

3. (IE瀏覽器)在使用百分比固定td大小情況下使用樣式table-layout:fixed與nowrap

4.(Firefox瀏覽器)在使用百分比固定td大小情況下使用樣式table-layout:fixed與nowrap,並且使用div。

-----------------------------------------------------------------------------------------------------------------------------------

三、強制不換行：div{white-space:nowrap;}

四、自動換行：div{ word-wrap: break-word; word-break: normal;}

五、強制英文單詞斷行：div{word-break:break-all;}
 

css程式碼如下：

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //這兒的數字代表的就是你所需要實現效果的第N行
-webkit-box-orient: vertical;
1
2
3
4
5
6
1
2
3
4
5
6
效果如下圖所示：

這裡寫圖片描述

css小知識點集錦: 
1.子元素文字始終居中 
div{ width:300px; height:300px;border:1px solid red; } 
p{ height:300px; display:table-cell; verticle-align:middle; }

2.盒子水平、垂直居中 
2-1 ：CSS3寫法 
display: flex; 
justify-content: center; /* horizontal centering */ 
align-items: center; /* vertical centering */ 
2-2 ：普通寫法 //不支援IE6，IE7 
display: table-cell; 
vertical-align: middle;

3.給定寬度，內部文字，元素平均分佈 
display: flex;//父盒子 
justify-content: space-around/space-between;//父盒子

4.文字顯示第N行之後變成…顯示 
text-overflow: -o-ellipsis-lastline; 
overflow: hidden; 
text-overflow: ellipsis; 
display: -webkit-box; 
-webkit-line-clamp: 2; //這兒的數字代表的就是你所需要實現效果的第N行 
-webkit-box-orient: vertical;

5.flex-grow 屬性規定專案將相對於同一容器內其他靈活的專案進行擴充套件的量。 
父元素：display:flex; 
子元素：flex-flow: number|initial|inherit;

6.線性漸變 
-moz/o/ms/webkit-linear-gradient( [ || ,]? , [, ]* ) 
eg:background:-moz/o/ms/webkit-linear-gradient(top,#ccc,#000); 
線性漸變在ie下的應用： 
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/IE<9>/ 
-ms-filter: “progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)”;/IE8+/

7.animation: ; 
animation-fill-mode 
none:如果你希望某個關鍵幀的屬性值應用，首先你的關鍵幀應該處於啟用。 
forwards:在你的動畫完成之後，所有的屬性都保留結束時的值。 
backwards:動畫會應用開始關鍵幀設定的屬性值，即使關鍵幀還沒有啟用。 
both:forwards和backwards的結合。 
注意：animation-play-state：running/paused屬性不能簡寫，要另外單獨寫

8.現階段相容性很差：object-fit:fill/contain/cover/none/scale-down/ 
object-fit主要適合於替換元素，比如：、、、、、和等。其預設值為fill。object-fill取值的說明如下：

fill:此值為boject-fit的預設值，替換內容的大小被設定為填充元素的內容框，也就是說，元素的內容擴大到完全填充容器的外形尺寸，即使這打破其內在的寬高比。 
contain：替換元素內容大小保持長寬比例填充元素內容容器，其具體物件大小被解析為一個包含元素的寬度和高度。也就是說，如果你在替換元素上設定一個明確的高度和寬度，此值將導致內容大小，完全在固定的比例顯示，但仍在元素尺寸內顯示。 
cover：替換元素內容大小保持長寬比例填充元素內容容器，其具體物件大小被解析為覆蓋整個元素的寬度和高度。也就是說，替換元素內容大小保持長寬比，但改變寬度和高度，以便完全覆蓋內容元素。 
none：替換元素內容不調整大小以適應內部元素的容器，內容完全忽略設定在元素上的任何高度和權重，並且仍在元素尺寸內顯示。 
scale-down：當內容大小設定了non或contain，將導致具體物件變得更小。

9.針對360瀏覽器下不能解決outline:none;但會出現虛線邊框的情況 
解決：在html中增加屬性：hidefocus=”true”即可

10.實現圖片居中的相容性又比較好的方法 
html:

<ul class="imgWrap clearfix">
    <li><span></span><img src="img/HBuilder.png" alt="" /></li>
</ul>
1
2
3
1
2
3
css:

<style type="text/css">
.imgWrap li{ 
height: 219px;
float: left;
border: solid 1px #666;
margin: 10px 10px 0 0;
list-style: none;
text-align: center;
font-size: 0;
}
.imgWrap span {
display: inline-block;/*將行內元素改變為行內塊元素顯示*/
width: 1px;/*實現ＩＥ下可讀效果*/
height: 100%;/*使用元素高度和圖片容器高度一樣*/
vertical-align: middle;/*垂直對齊*/
}
.imgWrap img {
vertical-align: middle;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
11.父容器高度固定，文字可能一行，兩行或更多行的垂直居中對齊(和圖片居中差不多) 
html:

<div class="test"><span>這裡存放的是文字</span></div>
1
1
css:

.test{
width: 300px;
height: 300px;
background: honeydew;
display: table-cell;
vertical-align: middle;
}
.test span{
display: inline-block;
vertical-align: middle;
}
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
12.css繪製三角形

width: 0;
height: 0;
border-bottom: 6px solid #ff3300;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
1
2
3
4
5
1
2
3
4
5
13.牛逼的 will-change屬性

will-change屬性可以提前通知瀏覽器我們要對元素做什麼動畫，這樣瀏覽器可以提前準備合適的優

化設定。這樣可以避免對頁面響應速度有重要影響的昂貴成本。元素可以更快的被改變，渲染的也

更快，這樣頁面可以快速更新，表現的更加流暢。

舉個例子，當對於素使用 CSS 3D變形時，元素及其內容可以在合成到頁面之前被建立到我們之前說

的layer。然而把元素放到layer中是個昂貴的操作，這將會導致變形動畫延遲一個課件的瞬間，也

就是flicker

為了避免這種延時，我們可以在發生之前通知瀏覽器，這樣瀏覽器會有一定的時間去準備這些變化

，當發生的時候layer已經準備好了，這樣動畫酒會很流暢，不會閃屏

使用will-change提示瀏覽器關於即將發生的變形十分簡單，添加個CSS屬性就行

will-change: transform; 
也可以告訴瀏覽器要改變元素的滾動條位置，或者多個要變化的屬性，寫下屬性的名字就行，也可

以寫多個，逗號隔開

will-change: transform, opacity; 
聲明瞭元素即將進行的變化會讓瀏覽器在渲染頁面時做更好的決定，這明顯比之前說的3D hacks要

好。

14.避免圖中的長按彈出選單與選中文字的行為、禁止選中文字 
a,img{ -webkit-touch-callout:none; } 
html,body{ -webkit-user-select:none;user-select:none; }

15.實現滑鼠滑過出現塊不被限定高度隱藏的方法

給最外層限定高度的div加上overflow:visible;

16.實現等比例圖片不論始終居中問題；

html結構：

        <ul>
            <li>
                <a href="#">
                    <img src="img/car3.jpg" alt="car" />
                </a>
            </li>
        </ul>
1
2
3
4
5
6
7
1
2
3
4
5
6
7
css結構

        ul{
                width: 100%;
                height: 360px;

            }

            li{
                width: 615px;
                height: 360px;
                overflow: hidden;
                border: 1px solid #dbdbdb;
            }

            a{
                display: block;
                width: 615px;
                height: 760px;
                line-height: 760px;
                margin-top: -200px;

            }

            img{
                width: 100%;
                vertical-align: middle;
            }