設定換行

white-space: nowrap

white-space	normal預設 / nowrap不換行 / pre保留空白 / pre-line / pre-wrap / initial / inherit

詳細說明－英文https://www.w3schools.com/cssref/pr_text_white-space.asp
詳細說明http://www.w3school.com.cn/cssref/pr_text_white-space.asp
瀏覽器支援http://caniuse.com/#search=white-space

單行文字過長溢出省略

text-overflow: ellipsis

text-overflow	clip / ellipsis / string / initial / inherit

詳細說明－英文https://www.w3schools.com/cssref/css3_pr_text-overflow.asp
詳細說明http://www.w3school.com.cn/cssref/pr_text-overflow.asp
瀏覽器支援http://caniuse.com/#search=text-overflow

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文字過長溢出省略

display: -webkit-box 必要屬性，將該段文字設為block區塊
-webkit-box-orient 必要屬性，設定排列方式
text-overflow: ellipsis 溢出部分顯示 ...
但ie10以下不支援

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

兼容ie10以下瀏覽器的方案

tag {
 position:relative;
 line-height:1em;
 height:3em;/* 設定三倍行高 */
 overflow:hidden;/* 超過範圍隱藏 */
}
tag:after {
 content:"...";
 position:absolute;
 bottom:0;
 right:0;
 padding:0 20px 1px 0;/* 要視字型大小決定右側需遮住多少 */
 background:#fff;/* ...後面的底色 */
}

結果如下