文字溢出处理，背景图片处理，企业开发经验

最新推荐文章于 2021-06-03 13:03:51 发布

Nawkham

最新推荐文章于 2021-06-03 13:03:51 发布

阅读量299

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/Nawkham/article/details/106308418

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文总结了CSS在企业开发中的实践经验，包括如何处理文字溢出，如单行文本的固定模式和多行文本的截断；探讨了在低网速下仅加载文本的策略，并介绍了如何利用padding和overflow属性来隐藏溢出文字的同时显示背景图片。此外，还讲解了HTML元素嵌套规则，如div与span、p标签的使用限制以及a标签的嵌套限制。

摘要由CSDN通过智能技术生成

文字溢出处理，背景图片处理，企业开发经验

知识点总结

溢出容器，要打点展示

单行文本
多行文本

容器用图片作为背景
当用户网速低于一定值时，浏览器会屏蔽css和js。如何在用户低速连接的情况下，只加载html中的文本，而在正常情况下，显示css中的图片呢？

让文字溢出容器，不换行，然后隐藏溢出部分
将标签的高度设置为0，标签容器变成一条线，标签中的文字自然就不显示了。然后padding-top设置一定值，图片填充在padding-top中，padding-top将标签撑开了，于是标签的文字内容显示在padding-top下方，再设置overflow: hidden就可以隐藏文字。

行级元素只能嵌套行级元素，块级元素可以嵌套任何元素

div中可以加任何东西，但是span里面就只能加行级元素
特殊：p标签时块级元素，但是它不能嵌套div(块级元素)。否则这个p标签会被div分成两个。
a标签中不能套a标签

溢出容器，要打点展示

单行文本(固定模式)

<html>
    <head>
        <meta charset="UTF-8">
        <title>lesson8</title>
        <link rel="stylesheet" href="css/lesson8.css">
    </head>
    <body>
        <p>与老师或机构私下交易造成的任何损失与纠纷，腾讯课堂不承担任何责任，若曾经有老师向你提出私下交易，请立即投诉。</p>
    </body>
</html>

*{
    margin: 0;
    padding: 0;
}

p{
    /* width: 300px;
    height: 20px;
    line-height: 20px;
    border: 1px solid black; */

    /* 让文本不换行 */
    white-space: nowrap;
    /* 溢出部分隐藏 */
    overflow: hidden;
    /* 溢出文字部分... */
    text-overflow: ellipsis;

}

多行文本(截断)

多行只做截断，不做打点

*{
    margin: 0;
    padding: 0;
}

p{
    width: 300px;
    /* 高度必须是行高的整数倍 */
    height: 40px;
    line-height: 20px;
    /* 溢出隐藏 */
    overflow: hidden;
    border: 1px solid black;
}

容器用图片作为背景

<html>
    <head>
        <meta charset="UTF-8">
        <title>lesson8</title>
        <link rel="stylesheet" href="css/lesson8.css">
    </head>
    <body>
        <div></div>
    </body>
</html>

*{
    margin: 0;
    padding: 0;
}

div{
    width: 200px;
    height: 200px;
    border: 1px solid black;
    background-image: url(../images/spring.jpeg);
    background-size: 200px;
    background-repeat: no-repeat;
    background-position: center center;
}

当用户网速低于一定值时，浏览器会屏蔽css和js。如何在用户低速连接的情况下，只加载html中的文本，而在正常情况下，显示css中的图片呢？

让文字溢出容器，不换行，然后隐藏溢出部分

<html>
    <head>
        <meta charset="UTF-8">
        <title>lesson8</title>
        <link rel="stylesheet" href="css/lesson8.css">
    </head>
    <body>
        <a href="https://www.taobao.com/" target="_blank">四川省女子监狱</a>
    </body>
</html>

*{
    margin: 0;
    padding: 0;
}

a{
    display: inline-block;
    text-decoration: none;
    color: #424242;
    width: 190px;
    height: 140px;
    border: 1px solid black;
    background-image: url(../images/spring.jpeg);
    background-size: 190px;

    /* 文本首行缩进容器的宽度 */
    text-indent: 190px;
    /* 不换行 */
    white-space: nowrap;
    /* 溢出隐藏 */
    overflow: hidden;
}

padding上可以加背景颜色和图片！但padding内不能写内容。

<div></div>

div{
    width: 100px;
    height: 100px;
    background-color: red;
    padding: 200px;
}

将标签的高度设置为0，标签容器变成一条线，标签中的文字自然就不显示了。然后padding-top设置一定值，图片填充在padding-top中，padding-top将标签撑开了，于是标签的文字内容显示在padding-top下方，再设置overflow: hidden就可以隐藏文字。

<html>
    <head>
        <meta charset="UTF-8">
        <title>lesson8</title>
        <link rel="stylesheet" href="css/lesson8.css">
    </head>
    <body>
        <a href="https://www.taobao.com/" target="_blank">四川省女子监狱</a>
        
    </body>
</html>

*{
    margin: 0;
    padding: 0;
}

a{
    display: inline-block;
    text-decoration: none;
    color: #424242;
    width: 190px;
    /* a标签的高度为0，但是它的padding-top有58px，并且图片填充在了padding-top中(见淘宝网logo)。html中的文本文字就在a标签的下方，当我们去掉overdlow: hidden时就会显现出来 */
    height: 0;
    padding-top: 90px;
    overflow: hidden;

    border: 1px solid black;
    background-image: url(../images/spring.jpeg);
    background-size: 190px;

}

行级元素只能嵌套行级元素，块级元素可以嵌套任何元素

div中可以加任何东西，但是span里面就只能加行级元素
特殊：p标签时块级元素，但是它不能嵌套div(块级元素)。否则这个p标签会被div分成两个。
a标签中不能套a标签

Nawkham

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文字溢出处理，背景图片处理，企业开发经验

文字溢出处理，背景图片处理，企业开发经验知识点总结溢出容器，要打点展示单行文本多行文本容器用图片作为背景当用户网速低于一定值时，浏览器会屏蔽css和js。如何在用户低速连接的情况下，只加载html中的文本，而在正常情况下，显示css中的图片呢？让文字溢出容器，不换行，然后隐藏溢出部分将标签的高度设置为0，标签容器变成一条线，标签中的文字自然就不显示了。然后padding-top设置一定值，图片填充在padding-top中，padding-top将标签撑开了，于是标签的文字内容
复制链接

扫一扫

专栏目录