Web前端开发-溢出属性

Web前端开发,自学笔记整理


溢出属性

1.溢出属性


<html>
    <head>
        <meta charset="UTF-8">
        <title>溢出属性title>
            <style type="text/css">
            .info1 {
                width: 300px;
                height: 100px;
                background: red;

                /*溢出属性
                    auto: 如果文本超出,自动加上滚动条
                    hidden: 超出部分隐藏 
                */
                overflow: hidden;
            }

            .box1 {
                overflow: auto;
            }
            .info2 {
                width: 300px;
                height: 100px;
                background: lightblue;

                /*跟随父元素box的属性*/
                overflow: inherit;
            }
        style>
    head>
    <body>
        <div class="info1">
            太阳当空照,花儿对我笑。太阳当空照,花儿对我笑。太阳当空照,花儿对我笑。太阳当空照,花儿对我笑。
太阳当空照,花儿对我笑。太阳当空照,花儿对我笑。太阳当空照,花儿对我笑。太阳当空照,花儿对我笑。太阳当空照,花儿对我笑。
        div>
        <br />
        <div class="box1">
            <div class="info2">
                太阳当空照,花儿对我笑。太阳当空照,花儿对我笑。太阳当空照,花儿对我笑。太阳当空照,花儿对我笑。
太阳当空照,花儿对我笑。太阳当空照,花儿对我笑。太阳当空照,花儿对我笑。太阳当空照,花儿对我笑。太阳当空照,花儿对我笑。
            div>
        div>  
    body>
html>

2. 溢出属性应用


<html>
    <head>
        <meta charset="UTF-8">
        <title>溢出属性应用title>
            <style type="text/css">
            .view1 {
                width: 300px;
                height: 100px;
                background: lightcoral;
                margin: 30px;
                float: left;
            }
            .view2 {

                height: 100px;
                background: lightgreen;
                margin: 50px;
                float: left;
            }   
            .box {
                width: 400px;
                height: 400px;
                background:lightsalmon;

                /*避免受到子类影响,添加溢出属性即可*/
                overflow: hidden;
            }
            .smallBox {
                width: 200px;
                height: 200px;
                background: lightcoral;

                /*垂直方向不生效,而且父类会受到影响*/
                margin: 100px;
            }
        style>
    head>
    <body>
        
        

        <div class="box">
            <div class="smallBox">div>
        div>
    body>
html>

3. 文本溢出属性


<html>
    <head>
        <meta charset="UTF-8">
        <title>文本溢出属性title>
            <style type="text/css">
            .info1 {
                height: 20px;
                background: lightblue;


                /*文本溢出属性
                    单独使用没有效果
                    clip: 剪切掉 ellipsis: 省略号 
                */
                /*text-overflow: clip;*/
                width: 300px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            ul li {
                /*1.给盒子设定宽度*/
                width: 300px;
                /*2.强制显示为一行*/
                white-space: nowrap;
                /*3.将超出部分隐藏*/
                overflow: hidden;
                /*4.使用文本溢出属性*/
                text-overflow: ellipsis;
            }
            ul li a {
                text-decoration: none;
                color: black;
            }
        style>
    head>
    <body>
        <p class="info1">
            你可以不聪明,但不可以不努力。
            你可以不聪明,但不可以不努力。

        p>
        <br />
        <ul>
            <li><a href="#">2018年春运情况2018年春运情况2018年春运情况2018年春运情况a>li>
            <li><a href="#">2018年春运情况2018年春运情况2018年春运情况a>li>
            <li><a href="#">2018年春运情况2018年春运情况2018年春运情况2018年春运情况2018年春运情况a>li>
        ul>
    body>
html>

你可能感兴趣的:(HTML/CSS)