1

v10_溢出属性_tianyi_666的技术博客_51CTO博客

 2 years ago
source link: https://blog.51cto.com/u_14124898/5987026
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

v10_溢出属性_tianyi_666的技术博客_51CTO博客

...    .b1{            width: 200px;            height: 100px;            background-color: bisque;            /* overflow: visible; 默认值 溢出内容显示在元素之外 */            /* overflow: hidden;   溢出内容隐藏 */            /* overflow: scroll;   溢出内容滚动显示 */            /* overflow: auto;  如果有溢出添加滚动条，没有则正常显示 */            /* overflow: inherit;  继承父元素效果 */            /* overflow-x: auto; overflow-y: hidden;  需要搭配使用 */        }    </style></head><body>    <div class="b1">        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit rem cumque corporis animi libero impedit vero, ab consequuntur soluta.     </div>








空余空间属性 white-space  








 white-space:  // 例如一行字在块中如何显示    nowrap  不换行 ，常用   //不折行+溢出隐藏 配合显示    pre     显示空格 回车 不换行     同pre标签    pre-wrap  显示空格 回车换行    pre-line  显示回车 换行  不显示空格








溢出隐藏中省略号显示








text-overflow:  clip  默认值 不显示省略号(...)                ellipsis 显示省略标记 当单文本溢出显示省略号需要同时设置以下声明：    1.容器宽度            width:200px;    2.强制文本在一行内显示  white-space:nowrap;    3.溢出内容为隐藏       overflow:hidden;    4.溢出文本显示省略号    text-overflow:ellipsis








案例：写的页面如图所示，各个块在显示不全的状态下滚动显示，在鼠标划过时有选定显示



v10_溢出属性_溢出滚动显示





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" cnotallow="IE=edge">
    <meta name="viewport" cnotallow="width=device-width, initial-scale=1.0">
    <title>溢出</title>
    <style>
        *{                         
            margin: 0;
            padding: 0;
        }
        .box{
            width: 890px;
            height: 290px;
            background: lavenderblush;
            /* margin: left; */
            overflow: auto;           /*溢出部分滚动显示*/
        }
        .info{
            width: 162px;
            height: 112px;
            border: 1px solid #808080;
            float: left;              /*浮动 实现横向排列*/
            margin-right: 48px;        /*设置小块外边距*/
            margin-bottom: 20px;
        }
        .info:hover div{        /*伪类选择器，做鼠标悬停的效果*/
            background: #219cea;
        }
        .info:hover .price{
            color: white;
        }
        .info:hover .date{
            color: white;
        }
        .info:hover .category{                    
            color: #219cea;
            background-image: url(./img/icon.png);   /*悬停时 添加小图标 设置不平铺  位置调整 */
            background-repeat: no-repeat;
            background-position: right ;
        }
        .info div{
            height: 84px;
            background: #cccccc;
            font-size: 12px;
        }
        .price{
            height: 63px;
            line-height: 63px;      /*标签的行高*/
            padding-left: 21px;    /*设置标签内边距  实现字体在页面的位置*/
            color: #b5b5b5;
        }
        .date{
            padding-left: 21px;
            color: #b5b5b5;
        }
        .category{
            height: 28px;
            background: white;
            line-height: 28px;        /*与整个高度齐平 实现垂直方向上居中*/
            color: black;
            text-align: center;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="box">          <!--外块>小块部分>块[有两个标签]+标签-->
        <div class="info">
            <div id="blk">
                <p class="price">100.00</p>
                <p class="date">有效期至20210521</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">            <!--以下重复多个模块-->
            <div id="blk">
                <p class="price">100.00</p>
                <p class="date">有效期至20210521</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div id="blk">
                <p class="price">100.00</p>
                <p class="date">有效期至20210521</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div id="blk">
                <p class="price">100.00</p>
                <p class="date">有效期至20210521</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div id="blk">
                <p class="price">100.00</p>
                <p class="date">有效期至20210521</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div id="blk">
                <p class="price">100.00</p>
                <p class="date">有效期至20210521</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div id="blk">
                <p class="price">100.00</p>
                <p class="date">有效期至20210521</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div id="blk">
                <p class="price">100.00</p>
                <p class="date">有效期至20210521</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div id="blk">
                <p class="price">100.00</p>
                <p class="date">有效期至20210521</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div id="blk">
                <p class="price">100.00</p>
                <p class="date">有效期至20210521</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
    </div>
</body>
</html></div

        

        

            

                report
            

        

    







        
Recommend

        



                

    
About Joyk

    
 





Aggregate valuable and interesting links.

Joyk means Joy of geeK