前端开发中关于文本溢出的处理

文本溢出是在网页中经常出现的情况，如果是要实现单行文本溢出用省略号代替的话，是非常容易实现的，代码如下：

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

示例：

但是，如果是要实现多行文本溢出时，溢出的文本用省略号代替呢？那也是非常简单的，代码如下（只有webkit内核才有作用）：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

移动端浏览器绝大部分是WebKit内核的，所以该方法适用于移动端。

• text-overflow: ellipsis 以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。
• display: -webkit-box 将对象作为弹性伸缩盒子模型显示 。
• -webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

• -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 。

  示例：
  
  同时，我们要注意的是，多行文本的溢出的处理方式的代码不能和white-space: nowrap;一起使用，否则省略号不会正常的显示出来。即下面这种代码是错误的

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: nowrap;

错误示例：

除了用CSS的方式，我们也可以使用JS来实现文本溢出用省略号代替的功能，JS代码如下：

/**
 * 文本溢出用省略号代替
 * @param {string} num 允许的最大文字数目
 * @param {string} con 包含文字的元素节点Id
 */
function textHide(num, con) {
  var contain = document.getElementById(con);
  var maxSize = num;
  var txt = contain.innerHTML;
  if(txt.length > num) {
    txt = txt.substring(0,num-1)+"...";
    contain.innerHTML = txt;
  }else{
    console.log("error")
  }
}

用js去实现的话浏览器的兼容性也比较好，不存在浏览器的兼容性问题。
示例：