05-CSS溢出属性&文本溢出省略号

一、溢出属性overflow

overflow:visible/hidden/scroll/auto/inherit
visible:默认值，溢出内容会显示在元素之外；
hidden：溢出内容隐藏
scroll：滚动，溢出内容会以滚动条的方式显示
auto：如果有溢出则会添加滚动条，没有溢出正常显示
inherit：规定应该遵从父元素继承overflow属性的值
overflow-x：X轴溢出
overflow-y：Y轴溢出

二、空余空间

定义溢出文本显示方式
white-space：

normal 默认值，文本溢出盒子定义的height值，全部显示
nowrap 不换行，一行展示所有
pre 预格式化文本，文本内空格、回车会在页面显示，不换行（浏览器中一行显示，溢出盒子范围）
pre-wrap 显示空格，回车，换行
pre-line 显示回车，不显示空格，换行

三、溢出文本省略号表示

text-overflow:clip/ellipsis
clip:默认值，不限时省略号
ellipsis：显示省略标记

当单行文本溢出显示省略号需要同时设置以下声明：

• 容器宽度：whidth: ~~px
• 强制文本在一行内显示： white-space:nowrap;
• 溢出内容为隐藏:overflow:hidden
• 溢出文本显示省略号: text-overflow:ellipsis