单行文本溢出省略号显示

溢出属性

溢出：一个元素有固定宽和高，当里面内容过多时会超出来，这种效果称之为溢出

属性：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;