Day4：文本溢出

学习目标

一、容器溢出相关的属性

1、页面重构

2、文本溢出相关的属性

• 1、溢出属性（容器的）

  说明：

  overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;

  visible:默认值，溢出内容会显示在元素之外；

  hidden：溢出内容隐藏；

  scroll：滚动，溢出内容以滚动方式显示;

  auto：如果有溢出会添加滚动条，没有溢出正常显示;

  inherit：规定应该遵从父元素继承overflow属性的值。

  overflow-x:X轴溢出；     overflow-y:Y轴溢出

• 2、空余空间

  说明：

  white-space：normal/nowrap/pre/pre-wrap /pre-line /inherit 该属性用来设置如何处理元素内的空白；

  normal：默认值，空白会被浏览器忽略，

  nowrap:文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止；

  pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签；

  pre-wrap：保留空白符序列，但是正常的进行换行；

  pre-line:合并空白符序列，但是保留换行符；

  inherit：规定应该遵从父元素继承White-space属性的值；

• 3、省略号显示

  说明：

  text-overflow:clip/ellipsis ;

  clip：不显示省略号（...）;

  ellipsis：显示省略标记；

   

  说明：

  text-overflow属性仅是...，当单行文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：

  1、容器宽度：width：value；

  2、强制文本在一行内显示:white-space：nowrap;

  3、溢出内容为隐藏：overflow：hidden；

  4、溢出文本显示省略号：text-overflow：ellipsis;

   

  扩展知识点：实现多行文本溢出时产生省略号
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; overflow: hidden;
  1、-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
  2、display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
  3、-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
  适用范围：
  因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；但文字未超出行的情况下也会出现省略号,可结合js优化该方法