溢出属性
溢出:一个元素有固定宽和高,当里面内容过多时会超出来,这种效果称之为溢出
属性:overflow
取值:
visible 正常显示,可以溢出(默认)
hidden 超出隐藏(溢出部分被剪裁掉)
scroll 添加滚动条
auto 自动,若有溢出添加滚动条,无溢出正常显示无滚动条
overflow-x: ;水平方向上超出
overflow-y: ;垂直方向上超出
剩余空间:
white-space
取值:
normal; 默认,文本自动折行
nowrap; 强制文本一行内显示
pre; 空格、回车皆显示,文本一行内显示
pre-wrap; 文本折行显示,空格、回车皆显示
pre-line; 文本折行显示,并不显示空格
省略号显示
text-overflow:
取值:
clip; 默认,不显示省略号
ellipsis; 显示省略号
单行文本溢出省略号显示(4步)
① 容器有固定宽(width)
② 强制文本在一行内显示
white-space:nowrap;
③ 让超出文本隐藏
overflow:hidden;
④ 添加省略号
text-overflow:ellipsis;