渐变色背景固定与文字溢出隐藏_div渐变遮住文字-CSDN博客

本文链接：https://blog.csdn.net/W261206/article/details/125358295

1.如何在不给宽高的情况下，让整个html页面有一个渐变的背景色呢？

给body标签，加一个样式为：background-attachment: fixed;（表示背景固定，背景图片不会随着页面的滚动而滚动）就可以让页面的背景色不在固定且不在移动，且填满页面。

代码：

<style>
        body {
            background-attachment: fixed;
            background-image: linear-gradient(red, blue);
        }
    </style>

效果：

2.文字溢出隐藏，并变成省略号

单行文字溢出隐藏，类调用：

 <style>
        div {
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
        }

        .one-txt-cut {
            overflow: hidden;
            /* 文字在一行显示, 不换行 */
            white-space: nowrap;
            /* 文字溢出显示省略号 */
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>

    <div class="one-txt-cut">
        我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子
    </div>

效果：

多行文字溢出隐藏，类调用：

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
        }

        .txt-cut {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;

        注意此处的数字4代表在第4行 超出隐藏
            -webkit-line-clamp: 4;

            -webkit-box-orient: vertical;
        }
    </style>
</head>

<body>

    <div class="txt-cut">
        我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子
    </div>
</body>

效果：