单行文本溢出显示省略号和元素类型

单行文本溢出显示省略号和元素类型

1.单行文本溢出省略号
（1）width 宽度
（2）white-space：nowrap 强制文本单行显示
（3）overflow：hidden 溢出内容为隐藏
（4）text-overflow：ellipsis/clip
white-space:pre（可以显示空格和回车）/pre-wrap（文本可以自己换行显示）/pre-line（不识别空格）/normal（不显示省略号，只是简单的裁剪）
如果文本溢出会显示滚动条 overflow：auto；
容器有滚动条overflow：scroll
overflow：visible是默认值，内容不会被修剪，会显示在元素框以外
2.元素类型
分类：
（1）块元素：设置宽高生效，默认情况下，在页面上是从上往下排列；可以作为其他元素的容器，呈现的形状是矩形。例如div，p，ul…
（2）行内元素：默认情况下，横向排列，并且中间有缝隙，设置宽度和高度不生效，对于margin的上下、line-heigth、text-indent不生效，对padding上下生效，但是解析的结果都比较不符合想要的结果。例如：span、b、a…
（3）行内块元素：既有行内元素的特点，又有块元素的特点。例如：img、input
3.元素类型转换display
display：block（块）/inline（行内）/inline-block（行内块）/none（隐藏）/list-item（li自带的属性）
4.多行文本溢出
display：-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden