1.單行實現文字省略號

/* 這裡要顯示的設定寬度 */
overflow: hidden;
white-space: nowrap;
/* 文字超出寬度則顯示ellipsis省略號 */
text-overflow: ellipsis;
width: 100%;

2.第幾行實現文字省略號

display: -webkit-box;
-webkit-box-orient: vertical;  /* 設定方向 */
-webkit-line-clamp: 2;  /* 設定超過為省略號的行數 */
overflow: hidden;


使用webpack打包工具時，會忽視這個-webkit-box-orient屬性，這裡修改成下面的寫法就可以了
display: -webkit-box; 
overflow: hidden;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
-webkit-line-clamp: 8;
text-overflow: ellipsis;
 

3.陰影

 box-shadow: 5px 6px 30px #d8d8d8;