HTML 文本超出宽度后实现自动截取

截断方式可以通过js逻辑实现，也可以通过CSS样式实现，使用js逻辑实现难免会使代码变的复杂，而且不容易复用，推荐使用CSS实现文本截断，而且可以在不同的HTML片段中使用。
CSS截断显示内容主要通过white-space，overflow，text-overflow三个属性实现。

HTML:

<div class="hello substr">
    hello world!
<div>

CSS:
white-space:nowrap;强制文本不换行
overflow:hidden;超过宽度部分进行隐藏

.hello{
  width:40px;
}
.substr{
  white-space:nowrap;
  overflow:hidden;
}

hello

CSS:
text-overflow: ellipsis;根据文本长度剩余部分显示为“···”

.hello{
  width:40px;
}
.substr{
  white-space:nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

he···