<style>
  /* 单行文本溢出隐藏，省略号代替 */
  #div-1 {
    width: 200px;
    /* 不允许换行 */
    white-space: nowrap;
    /* 溢出部分隐藏 */
    overflow: hidden;
    /* 溢出时使用省略号 */
    text-overflow: ellipsis;
  }

  /* 行内元素不存在溢出问题（内容始终由子元素撑开） */
  /* 因此行内元素要实现溢出显示省略号，必须转为块元素（inline-block / block） */
  #span {
    display: inline-block;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 多行文本溢出隐藏，省略号代替 */
  #div-2 {
    /* 既然是多行，就肯定要有换行，不用设置white-space */
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* 设置对齐模式 */
    -webkit-box-orient: vertical;
    /* 设置多行的行数 */
    -webkit-line-clamp: 2;
  }
</style>

<div id="div-1">Lorem ipsum dolor sit amet consectetur adipisicing.</div>
<span id="span">Lorem ipsum dolor sit amet consectetur adipisicing.</span>
<div id="div-2">Lorem ipsum dolor sit amet consectetur adipisicing.</div>