css 处理 单行/多行 文本溢出

在编写样式中，经常会出现一行或者多行文本显示不全，导致文本溢出的现象。可以通过如下方法解决：

1）单行溢出

前提必须有宽度

      width:300px;    
      whitewhite-space: nowrap; // 文本不会换行。
      overflow: hidden;  // 溢出多余裁剪   
      text-overflow:ellipsis; // 显示省略符号来代表被修剪的文本。     

---

2）多行文本溢出

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端。

     display: -webkit-box;  // 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示  
     -webkit-box-orient: vertical;   // 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
     -webkit-line-clamp: 3;    // 用来限制在一个块元素显示的文本的行数，根据需要写。
     overflow: hidden; // 溢出多余裁剪 

---

• 整理不易，多多鼓励！