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;                // 设置溢出内容隐藏
    }
    
    注意:需要对不同浏览器进行兼容处理

你可能感兴趣的