【前端学习笔记】溢出属性

溢出属性

1. 溢出属性（容器的）
   说明：
   overflow : visible / hidden(隐藏) / scroll / auto(自动) / inherit
   visible: 默认值，溢出内容会显示在元素之外
   hidden: 溢出内容隐藏
   scroll: 滚动
   auto: 如果有溢出会添加滚动条，没有溢出正常显示
   inherit: 规定应该从父元素继承overflow属性的值
   overflow-x: x轴溢出
   overflow-y: y轴溢出

2. 空余空间
   说明
   white-space: normal / normal / nowrap / pre / pre-wrap / pre-line / inherit / 该属性用来设置如何处理元素内的空白
   normal : 默认值，空白会被浏览器忽略
   nowrap：本文不会换行，文本会在同一行上继续，直到遇到br标签

   pre标签：预格式化文本 - 保留空格， tab，回车（不会换行）
   pre-wrap： 会折行
   pre- line：显示回车，不显示空格，换行

3. 省略号显示
   说明
   text-overflow: clip / ellipsis;
   clip：默认值，不显示省略号（…）
   ellipsis：显示省略标记

当单行文本溢出显示省略号需要同时设置以下声明：
1. 容器宽度：width：200px
2. 强制文本在一行内显示：white-space：nowrap;
3. 溢出内容为隐藏：overflow：hidden
4. 溢出文本显示省略号： text-overflow: ellipsis;