容器溢出

一、容器溢出

语法: overflow:visible|hidden|scroll|auto|inherit;

visible 默认值，溢出部分内容不会被裁剪，显示在容器框之外

hidden 溢出内容会被裁剪，隐藏不可见

scroll 当容器溢出时，以滚动条的形式查看溢出内容，没有溢出时，显示默认的滚动条

auto 哪个方向有溢出，就添加滚动条

inherit 从父元素那里继承overflow的属性值

注：还可以单独设置某个方向的溢出，即

overflow-x:hidden|scroll|auto;

overflow-y:hidden|scroll|auto;

二、文本溢出

语法：text-overflow:clip(不显示省略号)|ellipsis(显示省略号);

★ 单行文本省略号的设置

a) 设置固定的宽度 width:数值+单位;

b) 设置文本强制在一行显示 white-space:nowrap;

c) 设置溢出文本隐藏不可见 overflow:hidden;

d) 显示省略号 text-overflow:ellipsis;

注：I.上述方法只适合于单行文本省略号的设置，如果遇到多行文本省略号可使用js截取字符串的方法或交给后端处理
II.必须给文本所在最近的元素设置上述四个属性