文本溢出与元素类型

1、文本溢出

主要属性：

1）overflow hidden：隐藏

隐藏超出框架的文本

2）overflow auto：自动

如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容

3）text-overflow: clip  / ellipsis

clip：不显示省略号（...），而是简单的裁切;

ellipsis：当对象内文本溢出时，显示省略标记；

如要出现省略号，还需具备一下条件

容器宽度：width：value；（px、%，都可以）

强制文本在一行内显示:white-space：nowrap;

溢出内容为隐藏：overflow：hidden；

溢出文本显示省略号：text-overflow：ellipsis;                      

注：必须是单行文本才能设置本文溢出！！！

2、元素类型

1）块级元素

特点：可以定义自己的宽度和高度；块状元素都会占据一行；

例子：div   p   h1-h6   hr   ul   

2)行内元素

特点：表现形式是始终以行内逐个进行显示；没有自己的形状，不能定义它的宽和高；遵循盒模型基本规则

例子：a    span   br   i   

3)行内块元素

特点：具有块级元素与行内元素的特点

例子：input   img

 3、元素类型转换

主要属性：

display block：将元素转为块状元素，使该元素拥有块状元素的特点

display inline：将元素转为行内元素

display inline-block：将元素转为行内块元素（直接浮动就行）

display none：此元素不显示

display list-item：将元素转为列表项目