溢出属性(容器的)

说明:
overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;
visible:默认值,溢出内容会显示在元素之外;
hidden:溢出内容隐藏;
scroll:滚动，溢出内容以滚动方式显示;
auto:如果有溢出会添加滚动条，没有溢出正常显示;
inherit:规定应该遵从父元素继承overflow属性的值。
overflow-x:X轴溢出;overflow-y:Y轴溢出
实例
overflow:visible;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: yellow;
            overflow:visible;
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti neque corporis similique voluptates unde enim? Quidem obcaecati dolorum maiores, corrupti sunt quos quae adipisci atque architecto. Earum, obcaecati qui? Repudiandae!
    </div>
</body>
</html>

请添加图片描述
overflow:hidden;
请添加图片描述
overflow:scroll;
请添加图片描述
对某一位值实现滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: yellow;
            overflow:scroll;
        }
        .box{
            /* overflow: auto; */
            overflow-x: auto;
            overflow-y: hidden;
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti neque corporis similique voluptates unde enim? Quidem obcaecati dolorum maiores, corrupti sunt quos quae adipisci atque architecto. Earum, obcaecati qui? Repudiandae!
    </div>
    <div class="box">
        <img src="http://picture.ik123.com/uploads/allimg/170818/12-1FQQ45014.jpg" alt="">
    </div>
</body>
</html>

请添加图片描述

溢出省略号

说明:
white-space: normal/nowrap/pre/pre-wrap /pre-line /inherit该属性用来设置如何处理元素内的空白;
normal:默认值，空白会被浏览器忽略,
nowrap:文本不会换行，文本会在同-行上继续,直到遇到
标签为止;
举个列子
white-space: nowrap;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: yellow;
            /* overflow:scroll; */
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti neque corporis similique voluptates unde enim? Quidem obcaecati dolorum maiores, corrupti sunt quos quae adipisci atque architecto. Earum, obcaecati qui? Repudiandae!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus ab eius aliquam nulla ea ad quam nisi, alias doloremque, repellendus facilis laboriosam optio quidem nesciunt dignissimos perferendis eveniet dolorum tempore.
    </div>
</body>
</html>

请添加图片描述

    <pre>
        预格式化文本-保留空格,tab, 回车
    </pre>

请添加图片描述

nowrap : 不换行
pre:显示空格,回车，不换行
pre-wrap:显示空格,回车，换行
pre-line:显示回车，不显示空格，换行

举个列子
white-space: pre;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: yellow;
            /* overflow:scroll; */
            white-space: pre;
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti neque corporis similique voluptates unde enim? Quidem obcaecati dolorum maiores, corrupti sunt quos quae adipisci atque architecto. Earum, obcaecati qui? Repudiandae!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus ab eius aliquam nulla ea ad quam nisi, alias doloremque, repellendus facilis laboriosam optio quidem nesciunt dignissimos perferendis eveniet dolorum tempore.
    </div>
    <div>
        div{
            width: 200px;
            height: 200px;
            background: yellow;
            /* overflow:scroll; */
            white-space: nowrap;
        }
    </div>
</body>
</html>

请添加图片描述 white-space: pre-wrap;
请添加图片描述
white-space: pre-line;
请添加图片描述
说明:
text- overflow:cip/ellipsis ;
clip:默认值，不显示省略号(… ;
ellipsis:显示省略标记;
当单行文本溢出显示省略号需要同时设置以下声明:
1.容器宽度: width: 200px;
2.强制文本在一行内显示:white- space: nowrap;
3、溢出内容为隐藏: overflow: hidden;
4、溢出文本显示省略号: text-overflow: ellipsis;
举个列子（多余内容以省略号显示）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: yellow;
            /* overflow:scroll; */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti neque corporis similique voluptates unde enim? Quidem obcaecati dolorum maiores, corrupti sunt quos quae adipisci atque architecto. Earum, obcaecati qui? Repudiandae!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus ab eius aliquam nulla ea ad quam nisi, alias doloremque, repellendus facilis laboriosam optio quidem nesciunt dignissimos perferendis eveniet dolorum tempore.
    </div>
</body>
</html>

请添加图片描述

# css
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

沃云统一开发平台介绍

沃云集成平台研发平台介绍1.平台优势2.平台原理3.研发平台使用方法4.遇到的问题5.现阶段实现的功能6.后续需要补充的功能和优化内容研发平台介绍1.平台优势解决孤岛式应用，实现能力共享；现有系统框架过于复杂，跨系统业务处理成本居高不下，协同服务共享，降低运维成本；提高项目应用资源监控能力，改善资源利用率；业务微服务化，快速发布、快速部署，快速响应业务需求变化；沃云平台不仅提供了自动化的、可快速部

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生

基于docker的test-containers环境百宝箱

笔者语录： 我开了个公众号【Java你我他】，欢迎大家关注。  在很多时候，程序猿们更关注代码本身，而不愿意把时间花费在环境搭建上，这也是Docker变得越来越受欢迎的原因之一。test-containe是Docker生态圈中的一颗新星，其 主要针对测试领域、背靠Docker实现环境百宝箱功能。  test-containers： 你要的环境，我都有~  假设我们现在需要一个redis-clust

avatar 云原生