css换行方式和文字溢出

1. 强制不换行

   div{
       white-space:nowrap;
   }
   

2. 自动换行

   div{
       word-wrap:break-word;
   }
   

3. 强制英文单词断行

   div{
      word-break:break-all;
   }
   

4. 多行文字溢出…

   CSS代码：
   
   .box {
       width: 100px; 
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }
   
   HTML代码：
   
   <div class="box">
        多行文字溢出 多行文字溢出 多行文字溢出 多行文字溢出 多行文字溢出 多行文字溢出 多行文字溢出 多行文字溢出
   </div>
   
   效果：
    多行文字溢出 多行文字溢出 多行文字溢出 多行文字溢出
    多行文字溢出 多行文字溢出 多行文字溢出 多行文字溢出...
   

5. 单行文字溢出…

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