html内联框架内容溢出,【静态页面架构】CSS之显示与溢出

CSS架构

显示与溢出；

1.显示；

display属性；

以display设置隐藏效果和元素类型

div {

width: 200px;

height: 200px;

}

#qq {

background-color: blue;

}

#yy {

background-color: red;

/*

display: none 设置当前元素为隐藏效果

* 这种方式将元素设置为隐藏后，该元素不会再占有页面空间

通过display属性将元素显示

* block - 将元素设置为块级元素

* inline - 将元素设置为内联元素

* inline-block - 将元素设置为行内元素

*/

display: inline-block;

}

#cc {

background-color: yellow;

}

visibility属性；

以visibility设置，元素显示或隐藏和同时占据原有位置

div{

width: 200px;

height: 200px;

}

#qq{

background-color: blue;

}

#yy{

background-color: red;

visibility: visible;

}

#cc{

background-color: yellow;

}

示意图；

2.溢出；

overflow属性;

以overflow设置溢出的内容，是否剪掉内容和显示滚动条

#qq{

width: 200px;

height: 200px;

background-color: blue;

overflow: hidden;

/*hedden：将溢出的部分隐藏；隐藏的无法看到

scroll：以一个滚动条显示溢出内容；一直都有滚动条

auto：浏览器自行处理；

如果内容溢出；提供相应的滚动条

如果内容没有溢出；不做任何处理*/

}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur consequuntur ducimus enim eos error iusto maiores minima minus mollitia necessitatibus nisi obcaecati perferendis quaerat quibusdam suscipit, tempore ullam veritatis voluptatibus.

示意图；

text-overflow属性；

以text-overflow设置为显示的溢出内容，可被剪切，以一个省略号表示

div{

width: 200px;

height: 200px;

background-color: red;

line-height: 35px;

/*设置行高*/

white-space: nowrap;

/*强制将文本内容占一行*/

overflow: hidden;

/*overflow属性的值必须是hidden(表示超出部分隐藏)*/

text-overflow: ellipsis;

/*显示省略符号(...)来表示被切掉的文本*/

}

Lorem ipsum dolor sit amet, consectetur adipisicing .