應用場景分析：
一、當你的文字限定行數，超出部分的文字用省略號顯示。
（有兩個使用場景：1、單行 2、多行）
//單行overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
//多行display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3
;overflow: hidden;
二、當你的高度不定要垂直居中時，這裡我們用盒模型布局。
（這裡要對盒模型做相容性處理,不然有些手機系統不相容的。切記~~~~~~~）
display: -webkit-box; /*chrome 4+, safari 3.1, ios safari 3.2+
*/display: -moz-box; /*
firefox 17-
*/display: -webkit-flex; /*
chrome 21+, safari 6.1+, ios safari 7+, opera 15/16
*/display: -moz-flex; /*
firefox 18+
*/display: -ms-flexbox; /*
ie 10
*/display: flex;
/*chrome 29+, firefox 22+, ie 11+, opera 12.1/17/18, android 4.4+
*/justify-content: center;
align-items: center;
有些屬性不懂的，可以接著看。懂的到這裡就ok了：
justify-content: center;justify-content 用於設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。
align-items: center;align-items 屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。
css多行省略號和單行省略號
單行溢位，超出部分顯示.或者擷取。前提必須有寬度 陌生人，我也為你祝福 願你有乙個燦爛的前程 願你有情人終成眷屬 願你在塵世獲得幸福 我只願面朝大海，春暖花開 div body html 陌生人，我也為你祝福 願你有乙個燦爛的前程 願你有情人終成眷屬 願你在塵世獲得幸福 我只願面朝大海，春暖花開 d...
css文字省略號
1,單行溢位，超出部分顯示 或者擷取。前提必須有寬度。css 擷取為clip width 300px overflow hidden text overflow ellipsis white space nowrap 但是這個屬性只支援單行文字的溢位顯示省略號，如果我們要實現多行文字溢位顯示省略號呢...
css超過顯示省略號
1 style 2div 8style white space 設定如何處理元素內的空白，所有瀏覽器都支援 normal 預設。空白會被瀏覽器忽略。pre空白會被瀏覽器保留。其行為方式類似 html 中的標籤。nowrap 文字不會換行，文字會在在同一行上繼續，直到遇到 標籤為止。pre wrap ...