SOURCE

window.onload = function() {
  var dom = document.querySelector('.nth1') var length = dom.innerHTML.length
  if (length > 6) {
    dom.innerHTML = dom.innerHTML.substring(0, 6) + '...'
  }

  var dom2 = document.querySelector('.nth2') var length = dom.innerHTML.length
  if (length > 6) {
    dom2.innerHTML = dom2.innerHTML.substring(0, 6) + '...'
  }
}

<p>
  第一种方法：
</p>
<p class="stable-width text-overflow">
  哈哈哈哈哈哈哈哈哈哈哈哈hahhaha哈哈哈安
</p>
<p class="stable-width text-overflow">
  哈哈哈
</p>
<p>
  第二种方法：
</p>
<div class="stable-width text-overflow2">
  <div class="content">
    哈哈哈哈哈哈哈哈哈哈哈哈hahhaha哈哈哈安
  </div>
  <div class="dotted">
    …
  </div>
</div>
<div class="stable-width text-overflow2">
  <div class="content">
    哈哈哈
  </div>
  <div class="dotted">
    …
  </div>
</div>
<p>
  第三种方法
</p>
<p class="stable-width nth1">
  哈哈哈哈哈哈哈哈哈哈哈哈hahhaha哈哈哈安
</p>
<p class="stable-width nth2">
  hahahahahahahhaahha
</p>

.stable-width {
  width: 100px;
  height: 20px;
  overflow: hidden;
}

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

.text-overflow2 {
  overflow: hidden;
  zoom: 1;
}

.text-overflow2 .content {
  float: left;
  height: 100%;
  margin-right: .8em;
}

.text-overflow2 .dotted {
  height: 100%;
  float: right;
  margin-top: -1.3em;
}