CSS样式——单行溢出省略号显示与多行溢出省略号显示

• 了解空白空间的处理

  while-space:nowrap;
  
    1. 文本不换行并保留回车和空格：pre
    2. 文本换行并保留回车和空格：pre-wrap
    3. 文本换行并只保留回车：pre-line
    4. 文本不换行但不保留回车和空格：nowrap

• 了解溢出内容部分处理

  overflow:hidden
  
    1. 溢出不隐藏：visible
    2. 溢出隐藏：hidden
    3. 显示滚动条：scroll
    4. 自动显示滚动条：auto

• 设置单行文本溢出省略号显示

  div{
    width:100px;            // 添加宽度
    while-space:nowrap;        // 设置内容单行显示
    overflow:hidden;        // 设置溢出内容隐藏
    text-overflow:ellipsis;    // 添加省略号
  }

• 设置多行文本溢出省略号显示

  div{
    width: 100px;                    // 添加宽度
    display: -webkit-box;            // 对象作为弹性伸缩盒子模型显示 
    -webkit-box-orient: vertical;    // 设置或检索伸缩盒对象的子元素的排列方式
    -webkit-line-clamp: 3;            // 限制显示行数
    overflow: hidden;                // 设置溢出内容隐藏
  }
  
  注意：需要对不同浏览器进行兼容处理