06溢出属性、空白空间

1、简介

这里包括了溢出属性、空白空间属性（white-spacing）、文字溢出

1、溢出属性

overflow: visible | hidden | scoll | auto | inherit

• visible 默认值

• hidden 溢出裁切隐藏，溢出的内容不可见

• scoll 以滚动条型显示出溢出的内容，无论内容是否溢出都会显示滚动条的区域

• auto 自动，哪个方向存在溢出就会显示滚动条，没有溢出不存在滚动条

• inherit 继承父元素的overflow属性（了解）

overflow-x/overflow-y: visible | hidden | scoll | auto | inherit

2、空白空间属性（white-space）

white-space属性设置如何处理元素内的空白

white-space: normal | pre | pre-wrap | nowrap | pre-line

• normal 如果文字显示不开自动换行 （默认）

• nowrap文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止记住这个就行，其他了解

• pre 空白会被浏览器保留，将所有的回车、换行、空格、缩进都可以解析出来，遇到边界不会换行，遇到br、回车才会换行

• pre-wrap 保留空白符序列，将所有的回车、换行、空格、缩进都可以解析出来，遇到边界会换行

• pre-line 解析回车换行，遇到边界会换行

 

3、文字溢出

属性text-overflow

• div {
      text-overflow: ellipsis | clip ;
  }

• ellipsis 文字溢出的时候用省略号显示记住这个

• clip 裁切，不用了解这个，与overflow：hidden的属性一样

单行文本溢出

• 需要满足三个条件

  • 强制一行显示文本 (white-space)

  • 超出部分隐藏 (overflow)

  • 文字用省略号代替超出部分 (text-overflow)

  • /*1、设置宽度*/
    width:  ;
    ​
    /*2、先强制一行内显示文本*/
    white-space:nowrap;
    ​
    /*3、超出的部分隐藏*/
    overflow:hidden;
    ​
    /*4、文字用省略号替代超出的部分*/
    text-overflow:ellipsis;

多行文本溢出

• 兼容性问题，适用于webkit浏览器或移动端（移动端大部分是webkit内核），对IE没有作用

• div {
      overflow: hidden;
      text-overflow: ellipsis;
      /* 弹性伸缩盒子模型显示 */
      display: -webkit-box;
      
      /* 限制在一个块元素显示文本的行数 */
      -webkit-line-clamp: 2;
      
      /* 排列方式为垂直居中 */
      -webkit-box-orient: verical;
  }

• 使用时要严格控制盒子大小

• 开发时更推荐后台来控制字数，因为后台人员可以设置显示多少个字，操作更简单

•