文本溢出问题

单行文本溢出

html如下：

<div>单行文本溢出</div>
<div class="text1">
  这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
</div>

css如下：

.text1{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

多行文本溢出：webkit扩展属性

html如下：

<div>多行文本溢出</div>
<div class="text2">
  这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
</div>

css如下：

.text2{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  text-overflow:ellipsis;
  -webkit-line-clamp:3;
  overflow:hidden;
}

多行文本溢出：js判断字数

html如下：

<div>多行文本溢出</div>
<div id="text3">
  这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
</div>

js如下：

getLen = function(str) {
  if (str == null) return 0;
  if (typeof str != "string"){
    str += "";
  }
  return str.replace(/[^\x00-\xff]/g,"01").length;
}

var str = document.getElementById('text3').innerHTML;
var s = '';

if (getLen(str) > 200){
  s = str.substr(0, 200);
  document.getElementById('text3').innerHTML = s + '…';
}

效果如下：

以上实际效果看这里