overflow
为了能更好处理溢出的内容，CSS中提供了一个名为overflow的属性，该属性可以设置如何处理溢出元素内容区的内容，属性的可选值如下表所示：
| 值 | 描述 |
|---|---|
| visible | 默认值，对溢出的内容不做处理，内容会在元素内容区之外显示 |
| hidden | 隐藏溢出元素内容区的内容 |
| scroll | 隐藏溢出元素内容区的内容，并在元素的左侧和下方分别创建一个滚动条，通过滑动滚动条可以查看元素中的所有内容 |
| auto | 如果出现内容溢出，则会在元素左侧创建一个滚动条，通过滑动滚动条可以查看元素中的全部内容 |
| inherit | 从父元素继承overflow属性的值 |
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>滚动条</title>
<style>
.box {
width: 400px;
height: 200px;
background: cornflowerblue;
color: darkorange;
overflow: auto;
}
p {
width: 5em; /* 截取5个字符 */
white-space: nowrap; /* normal禁止文字折行 initial换行显示 */
overflow: hidden; /* 超出部分不显示 */
text-overflow: ellipsis; /* 文本溢出时显示省略标记 */
}
/* 滚动条样式 */
.innerbox::-webkit-scrollbar {
/* 宽度，高度 */
width: 4px;
height: 4px;
}
.innerbox::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(122, 0, 0, 0.2);
}
.innerbox::-webkit-slider-runnable-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="box innerbox">
<p>
# 查看docker daemon的运行状态
ps axf | grep docker
# 查看各个容器信息
docker info
# 查看容器配置信息
docker inspect 容器名
# 查看容器状态
docker ps
# 查看资源状态：CPU、内存
docker stats 容器名
docker top 容器名
# 查看容器日志
docker logs -f 容器名
# 查看挂载的卷
docker volume ls
# 查看挂载信息
docker volume inspect 卷名
# 拷贝文件到容器中--->docker cp ./start.sh a375:/home/mind/model
docker cp 主机文件目录 容器名:容器文件目录
# 容器运行/启动/终止
## 运行容器
docker run -d ubuntu:14.04/bin/sh -c "while true;do echo hello world;sleep 1;done"
### docker启动一个ubuntu容器并在守护态运行
### 注：docker run的时候如果添加--rm标记，则容器在终止后会立即删除，--rm和-d参数不能同时使用
#### 启动一个nginx容器，容器终止即删除容器
docker run --name webserver --rm -p 80:80 nginx
#### 启动一个nginx容器，守护进程运行
docker run --name webserver -d -p 80:80 nginx
## 容器启动和终止
### 启动一个终止态的容器
docker start 容器id/容器名
### 终止一个运行中的容器
docker stop 容器id/容器名
### 重启一个容器
docker restart 容器id/容器名
## 删除容器
### 删除一个处于终止状态的容器
docker rm 容器名/容器id
docker rm trusting_newton
### 清理全部终止状态的容器
docker rm $(docker ps -a -q)
docker container prune -f
</p>
</div>
</body>
</html>
自定义滚动条样式
/* 滚动条样式 */
.innerbox::-webkit-scrollbar {
/* 宽度，高度 */
width: 4px;
height: 4px;
}
.innerbox::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(122, 0, 0, 0.2);
}
.innerbox::-webkit-slider-runnable-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
}
文本显示省略号
/* 文字截取 */
p {
width: 5em; /* 截取5个字符 */
white-space: nowrap; /* normal禁止文字折行 initial换行显示 */
overflow: hidden; /* 超出部分不显示 */
text-overflow: ellipsis; /* 文本溢出时显示省略标记 */
}
网友评论