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

最新推荐文章于 2021-06-09 10:35:41 发布

VIP文章 Nawkham

最新推荐文章于 2021-06-09 10:35:41 发布

阅读量288

点赞数

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

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

版权

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

知识点总结

溢出容器，要打点展示

单行文本
多行文本

容器用图片作为背景
当用户网速低于一定值时，浏览器会屏蔽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;
    /*

最低0.47元/天解锁文章

Nawkham

关注

0
点赞
踩
0

收藏

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

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

扫一扫