How to solve the text overflow problem of web pages

Single line text overflow issue:          

   

/*1. 先强制一行内显示文本*/
     white-space: nowrap;
/*2. 超出的部分隐藏*/
     overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
     text-overflow: ellipsis;      

  

Multiline text overflows:

width: 80%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;