CSS：文本溢出隐藏，省略号代替效果实现

<div id="box1">
  大河之剑天上来大河之剑天上来大河之剑天上来大河之剑天上来大河之剑天上来大河之剑天上来大河之剑天上来大河之剑天上来大河之剑天上来大河之剑天上来大河之剑天上来
</div>

单行

#box1 {
  width: 200px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行

#box1 {
  width: 200px;
  display: -webkit-box;
  /* 设置对其模式 */
  -webkit-box-orient: vertical;
  /* 设置盒子的行数 */
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}