• 理解空白空间的解决

    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;                // 设置溢出内容暗藏}留神：须要对不同浏览器进行兼容解决