乐趣区

关于前端学习:CSS样式单行溢出省略号显示与多行溢出省略号显示

jiezi

  • 理解空白空间的解决 

    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;                // 设置溢出内容暗藏
}

留神：须要对不同浏览器进行兼容解决
退出移动版