【静态页面】CSS的显示与溢出

左手的ㄟ右手 2023-01-24 04:22 70阅读 0赞

## CSS架构 ##

## 显示与溢出； ##

# 1.显示； #

## display属性； ##

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

<style>
            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;
            }
    
        </style>

## visibility属性； ##

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

<style>
            div{
                width: 200px;
                height: 200px;
            }
            #qq{
                background-color: blue;
            }
            #yy{
                background-color: red;
                visibility: visible;
                
            }
            #cc{
                background-color: yellow;
            }
        </style>
    </head>
    <body>
    <div id="qq"></div>
    <div id="yy"></div>
    <div id="cc"></div>
    </body>

示意图；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjEyM18wMA_size_16_color_FFFFFF_t_70][]

# 2.溢出； #

## overflow属性; ##

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

<style>
            #qq{
                width: 200px;
                height: 200px;
                background-color: blue;
                overflow: hidden;
                /*hedden：将溢出的部分隐藏；隐藏的无法看到
                        scroll：以一个滚动条显示溢出内容；一直都有滚动条
                        auto：浏览器自行处理；
                        如果内容溢出；提供相应的滚动条
                        如果内容没有溢出；不做任何处理*/
            }
        </style>
    <body>
    <div id="qq">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.</div>
    
    </body>

示意图；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjEyM18wMA_size_16_color_FFFFFF_t_70 1][]

## text-overflow属性； ##

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

<style>
            div{
                width: 200px;
                height: 200px;
                background-color: red;
                line-height: 35px;
                /*设置行高*/
                white-space: nowrap;
                /*强制将文本内容占一行*/
                overflow: hidden;
                /*overflow属性的值必须是hidden(表示超出部分隐藏)*/
                text-overflow: ellipsis;
                /*显示省略符号（...）来表示被切掉的文本*/
            }
        </style>
    </head>
    <body>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing  .</div>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjEyM18wMA_size_16_color_FFFFFF_t_70]: /images/20221004/85ed86f291f24957b7c435e8023e9656.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjEyM18wMA_size_16_color_FFFFFF_t_70 1]: /images/20221004/b890c718882543c79ac0db6c26e95a23.png

发表评论取消回复

表情：

评论列表（有 0 条评论，70人围观）

还没有评论，来说两句吧...

相关阅读

相关【静态页面】CSS的显示与溢出

CSS架构显示与溢出； 1.显示； display属性；以display设置隐藏效果和元素类型 <style> d

左手的ㄟ右手/ 2023年01月24日 04:22/ 0 赞/ 71 阅读

相关 CSS文本溢出显示省略号

单行（方法一） overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 单行（方法

Myth丶恋晨/ 2023年01月04日 10:28/ 0 赞/ 277 阅读

相关 css文本溢出显示省略号

文本溢出处理 `单行`文本 overflow:hidden; text-overflow:ellipsis; white-space:now

r囧r小猫/ 2022年12月24日 11:58/ 0 赞/ 274 阅读

相关 [CSS二] css属性，元素溢出和显示特性

四、css属性 1. 布局常用样式属性 width 设置元素(标签)的宽度，如：width:100px; height 设置元素(标签)的高度，如：he

迷南。/ 2022年11月26日 05:00/ 0 赞/ 159 阅读

相关 CSS设置文本溢出显示省略号

单行文本 ![在这里插入图片描述][20210708103956946.png] overflow: hidden; text-overflow: el

小鱼儿/ 2022年10月18日 12:59/ 0 赞/ 247 阅读

相关 CSS文本溢出显示省略号

1单行 overflow:hidden; text-overflow:ellipsis; white-space:nowrap

缺乏、安全感/ 2022年04月23日 04:08/ 0 赞/ 321 阅读

相关 CSS 文本溢出省略显示

实现文本显示单行或多行，超出部分用省略号显示是一个很常见的需求，在这里做个分享记录。(文末有 demo 演示~) 单行溢出缩略下面是单行缩略的实现： ove

男娘i/ 2022年04月14日 20:29/ 0 赞/ 365 阅读

相关 springMVC框架页面的静态资源文件CSS等不能显示问题

参考：[https://www.bbsmax.com/A/pRdB9xa5nx/][https_www.bbsmax.com_A_pRdB9xa5nx] 解决办法：（1）

太过爱你忘了你带给我的痛/ 2022年03月26日 04:44/ 0 赞/ 363 阅读

相关溢出显示省略号css代码

溢出显示省略号参过参数可以只是单/多行. /** * 溢出省略号 * @param {Number} 行数 */

你的名字/ 2021年01月29日 08:52/ 0 赞/ 762 阅读

相关 CSS文本溢出显示省略号

单行语法 overflow:hidden; text-overflow:ellipsis; white-space:nowrap 示例

红太狼/ 2021年01月27日 16:34/ 0 赞/ 820 阅读