十、文本溢出处理、BFC、BFC、浏览器常见兼容问题、CSS Hack、项目检查及测试

最新推荐文章于 2023-06-16 17:00:50 发布

小豆很优秀

最新推荐文章于 2023-06-16 17:00:50 发布

阅读量395

点赞数 1

分类专栏： HTML的基本信息 css 文章标签： html css

本文链接：https://blog.csdn.net/qq_52426181/article/details/110237463

版权

一、## 一、文本溢出处理

1、单行文本溢出处理

关键点：

限制容器的宽度（width：300px）
让文字在一行显示
```
white-space： nowrap | normal;
```
- nowrap 文字强制在一行显示
- normal 正常
溢出隐藏
```
overflow：hidden;
```
文字溢出部分如何进行处理（是否需要用省略号代替）
```
text-overflow: clip | ellipsis;
```
- clip 超出部分直接裁剪
- ellipsis 超出部分省略号显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
    
            /* 限制容器的宽度 */
            width: 300px;
            border: 1px solid red;
            /* 文字强制在一行显示 */
            white-space: nowrap;
            /* 给盒子溢出隐藏 */
            overflow: hidden;
            /* 超出部分的文字是否以省略号的形式进行处理   clip---超出部分直接裁剪;ellipsis----超出部分以省略号的形式显示*/
            /* text-overflow: clip; */
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <p>王冰冰在吉林，基本重大新闻都会参与报道，包括农业项目、黄河水土保护、空军装备、旅游新闻，甚至之前央视春晚长春分会场，她也会参与报道新闻，作为主持人，王冰冰是全能选手。早在2016年就已是央视记者团的成员，主要负责吉林方面的新闻报道。</p>
</body>
</html>

2、多行文本溢出处理

（1）通过-webkit-私有属性处理

这种处理方式只在webkit内核的浏览器中生效（兼容性不好）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
    
            width: 300px;
            border: 1px solid red;
            /* 溢出隐藏 */
            overflow: hidden;
            /* 私有属性： -webkit-  只在webKit内核的浏览器中可以生效 */
            /* 文字只显示3行 */
            -webkit-line-clamp: 2;
            /* 需要配合以下两个属性一起设置才会有显示3行的效果 */
            /* 将盒子转换为弹性伸缩盒 */
            display: -webkit-box;
            /* 盒子内部的内容的排列方式   vertical 垂直排列*/
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <p>王冰冰在吉林，基本重大新闻都会参与报道，包括农业项目、黄河水土保护、空军装备、旅游新闻，甚至之前央视春晚长春分会场，她也会参与报道新闻，作为主持人，王冰冰是全能选手。早在2016年就已是央视记者团的成员，主要负责吉林方面的新闻报道。</p>
</body>
</html>

（2）通过伪元素模拟省略号的形式来进行溢出处理

关键点：

给盒子限制宽度
行高与盒高成倍数关系（显示几行文字，并且文字不被显示一半）
给盒子溢出隐藏
给盒子中最后添加一个伪元素，伪元素的内容为省略号，将伪元素定位到盒子的末尾（如果省略号跟文字重叠，可以给伪元素设置一个背景【跟盒子的背景保持一致】，还可以通过padding和偏移属性进行微调）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       p {
    
           position: relative;
           width: 350px;
           /* 行高跟盒子的高度成倍数关系就可以了 */
           height: 60px;
           line-height: 30px;
           border: 1px solid red;
           overflow: hidden;
       }
       /* css3中伪元素推荐使用双冒号，但是在ie8中双冒号会有兼容问题 */
       p::after {
    
        position: absolute;
        right: 11px;
        bottom: 0;
        content: "...";
        background: white;
        padding: 0 3px;
       }
    </style>
</head>
<body>
    <p>王冰冰在吉林，基本重大新闻都会参与报道包括农业项目黄河水土保护空军装备旅游新闻，甚至之前央视春晚长春分会场，她也会参与报道新闻，作为主持人，王冰冰是全能选手。早在2016年就已是央视记者团的成员，主要负责吉林方面的新闻报道。</p>
</body>
</html>

二、BFC

1、BFC概念

英文：Block Formatting Context，全称"块级格式化上下文"

BFC：只有块级元素参与的，BFC是指块级元素在页面中如何排列，如何渲染，并且与内部元素无关

2、BFC特性

（1）内部标签在垂直方向上一个接一个的放置

（2）垂直方向上的距离是由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠

（3）每个标签的左外边距会与包含块的左边距相接触（从左到右），浮动元素也是如此

（4）BFC区域不会与浮动区域发生重叠

（5）计算BFC区域的高度时，浮动子元素也参与计算

（6）BFC就是页面中的一个隔离的独立容器，容器里面的子标签不会影响外面的标签，反之亦然。

3、BFC的生成

根元素
设置了以下属性的元素会生成一个新的BFC
- display:inline-block
- float : left | right
- position ：absolute | fixed;
- overflow : hidden | auto | scroll；

4、BFC解决的问题

（1）兄弟元素的外边距塌陷问题

产生的原因：根据BFC特性（2）会产生兄弟元素外边距塌陷问题

解决方案：让其中一个兄弟元素处于一个新的BFC区域即可，具体：给任何一个兄弟元素套一个父盒，给父盒设置overflow，值不为vislible都可以

<!-- <div style="overflow: hidden;"> -->
<!-- <div style="overflow: auto;"> -->
<div style="overflow: scroll;">
    <div class="box1"></div>
</div>
<div class="box2"></div>

（2）自适应两栏或者三栏布局

自适应两栏

产生原因：浮动会脱离文档流，但是不脱离文本流，所以左侧盒子浮动之后，右侧盒子中的文字会环绕在左侧盒子的周围

解决问题：根据特性（4），可以让右侧盒子处于一个新的BFC区域就不会与浮动区域发生重叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left {
    
            float: left;
            width: 300px;
            min-height: 300px;
            background: pink;
        }
        .right {
    
            min-height: 300px;
            background-color: yellow;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left">左侧盒子</div>
        <div class="right">右侧盒子</div>
    </div>
</body>
</html>

自适应三栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left {
    
            float: left;
            width: 300px;
            min-height: 300px;
            background: pink;
        }
        .right {
    
            float: right;
            width: 200px;
            min-height: 300px;
            background-color: yellow;
        }
        .center {
    
            min-height: 300px;
            background-color: teal;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left">左侧盒子</div>
        <div class="right">右侧盒子</div>
        <div class="center">中间盒子</div>
    </div>

最低0.47元/天解锁文章

小豆很优秀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
十、文本溢出处理、BFC、BFC、浏览器常见兼容问题、CSS Hack、项目检查及测试

一、## 一、文本溢出处理1、单行文本溢出处理关键点：限制容器的宽度（width：300px）让文字在一行显示white-space： nowrap | normal;nowrap 文字强制在一行显示normal 正常溢出隐藏overflow：hidden;文字溢出部分如何进行处理（是否需要用省略号代替）text-overflow: clip | ellipsis;clip 超出部分直接裁剪ellipsis
复制链接

扫一扫