css溢出隐藏代码
CSS溢出隐藏有很多种方式,可以根据需要选择使用。以下是一些常用的CSS溢出隐藏代码。
1. 文本溢出隐藏:
```
.ellipsis {
white-space: nowrap; /* 设置文本不换行 */
overflow: hidden; /* 设置文本溢出隐藏 */
text-overflow: ellipsis; /* 设置显示省略号 */
}
This is a long text that will be truncated if it exceeds the container width.
```
这段代码会将文本内容隐藏在容器中,并在超过容器宽度时显示省略号。
2. 多行文本溢出隐藏:
```
.multi-line {
display: -webkit-box; /* 设置为块级元素 */
-webkit-line-clamp: 3; /* 设置需要显示的行数 */
-webkit-box-orient: vertical; /* 设置文本垂直布局 */
overflow: hidden; /* 设置文本溢出隐藏 */
}
This is a long text that will be truncated if it exceeds the container height. This is a long text that will be truncated if it exceeds the container height. This is a long text that will be truncated if it exceeds the container height.
```
这段代码会将多行文本内容隐藏在容器中,并在超过容器高度时显示省略号。
3. 图片溢出隐藏:
```
.image-container {
width: 200px; /* 设置容器宽度 */
height: 200px; /* 设置容器高度 */
overflow: hidden; /* 设置溢出隐藏 */
}
```
这段代码会将图片内容隐藏在容器中,并根据容器大小缩放图片。
4. 溢出内容显示提示:
```
.container {
width: 200px; /* 设置容器宽度 */
height: 200px; /* 设置容器高度 */
position: relative; /* 设置容器相对定位 */
overflow: hidden; /* 设置溢出隐藏 */
}
.tooltip {
position: absolute; /* 设置提示框*定位 */
top: 0; /* 设置提示框位置 */
left: 0; /* 设置提示框位置 */
width: *; /* 设置提示框宽度与容器相同 */
height: *; /* 设置提示框高度与容器相同 */
background-color: rgba(0
0.5); /* 设置提示框背景颜色 */
display: flex; /* 设置提示框内容居中显示 */
justify-content: center; /* 设置提示框内容居中显示 */
align-items: center; /* 设置提示框内容居中显示 */
color: #fff; /* 设置提示框文本颜色 */
font-size: 18px; /* 设置提示框文本字体大小 */
}
Content is overflowed!
```
这段代码会在容器溢出内容时显示一个提示框。
以上是一些常用的CSS溢出隐藏代码,根据需要选择合适的代码来实现溢出隐藏效果。