在最初的切圖生涯中，頁面上的很多文字內容或多或少，有時候就是要求超出部分顯示為省略號，當然也可能會要求為單行溢位或多行溢位。
單行溢位的話：
width:value; //定義容器寬度
white-space:nowrap; //強制文字在單行顯示
overflow:hidden; //溢位隱藏
text-overflow:ellipsis; //溢位文字顯示為省略號
在webkit瀏覽器或移動端（絕大部分是webkit核心的瀏覽器）的頁面實現比較簡單，可以直接使用webkit的css擴充套件屬性(webkit是私有屬性)-webkit-line-clamp ；注意：這是乙個 不規範的屬性（unsupported webkit property），它沒有出現在 css 規範草案中。
-webkit-line-clamp用來限制在乙個塊元素顯示的文字的行數。 為了實現該效果，它需要組合其他的webkit屬性。常見結合屬性：
display: -webkit-box; 必須結合的屬性 ，將物件作為彈性伸縮盒子模型顯示 。
-webkit-box-orient 必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式 。
text-overflow: ellipsis;，可以用來多行文字的情況下，用省略號「…」隱藏超出範圍的文字。
這個屬性只合適webkit瀏覽器或移動端（絕大部分是webkit核心的）瀏覽器
display: -webkit-box; //必須結合的屬性 ，將物件作為彈性伸縮盒子模型顯示 。
-webkit-box-orient; //必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式 。
text-overflow: ellipsis; //可以用來多行文字的情況下，用省略號「…」隱藏超出範圍的文字 。
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
比較靠譜簡單的做法就是設定相對定位的容器高度，用包含省略號(…)的元素模擬實現；
p
p::after
該方法適用範圍廣，但文字未超出行的情況下也會出現省略號,可結合js優化該方法。
注：將height設定為line-height的整數倍，防止超出的文字露出。
給p::after新增漸變背景可避免文字只顯示一半。
由於ie6-7不顯示content內容，所以要新增標籤相容ie6-7（如：…）；相容ie8需要將::after替換成:after。
前端基礎八之文字標籤
1 strong與em標籤 strong表示乙個強調內容，重要內容，該標籤內容一般有個加粗的效果.em表示強調內容，但是沒有strong那麼強烈，一般以斜體表示。2 b標籤與i標籤 b標籤用來設定加粗的文字，顯示效果和strong是一樣的 i標籤用來設定斜體字，顯示效果和em是一樣的。但是注意的是，...
前端學習筆記 html 文字格式化標籤 標籤屬性
在網頁中，有時需要為文字設定粗體 斜體或下劃線效果，這時就需要用到html中的文字格式化標籤，使文字以特殊的方式顯示。b i s u 只有使用 沒有 強調的意思 strong em del ins 語義更強烈 練習 strong 粗體，語義更強b 也可表示粗體em 斜體，語義更強 i 也可表示斜體 ...
web前端基礎 HTML文字和段落標籤
align對齊屬性值值描述 left 左對齊right 右對齊center 居中對齊 justify 對行進行伸展，每行可以有相等的長度 列表項 列表項 值描述1 數字1，2 a字母a,b a字母a,b i小寫羅馬數字i type屬性值 值描述 disc 圓點square 正方形circle 空心圓...