css文字溢出處理方式（單行和多行）

單行文字溢出

width:250px;
overflow:hidden; /* 移除隱藏 */
text-overflow: ellipsis; /* 省略號 */
white-space: nowrap; /* 禁止文字自動換行 */

 

多行溢出

width:200px;
overflow:hidden; /* 溢出隱藏 */
display: -webkit-box;  /* 老版彈性盒子，存在瀏覽器兼容問題，需要添加-webkit，表示內容在水平方向上的排放 */
-webkit-line-clamp: 2; /* 溢出的行數 */
-webkit-box-orient: vertical; /* 規定內容水平排放 */

 

單行文字和多行文字溢出，經常使用在列表頁的文章標題中，固定標題顯示的行數，鼠標懸浮的時候，看到完整的標題內容