CSS 超出…
在网页开发中,经常会遇到内容超出容器的情况,这时候就需要使用 CSS 来处理。本文将详细介绍如何使用 CSS 处理内容超出容器的情况,包括文本超出、图片超出、盒子超出等情况。
文本超出
1. 文本溢出显示省略号
当文本内容超出容器时,可以使用 text-overflow: ellipsis
属性来显示省略号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Overflow</title>
<style>
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="container">This is a long text that will be truncated with an ellipsis.</div>
</body>
</html>
Output:
运行结果:This is a long text that will be truncated with an ellipsis.
2. 文本溢出换行显示省略号
如果希望文本溢出后换行显示省略号,可以使用 white-space: normal
属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Overflow</title>
<style>
.container {
width: 200px;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="container">This is a long text that will be truncated with an ellipsis.</div>
</body>
</html>
Output:
运行结果:This is a long text that will be truncated with an ellipsis.
图片超出
3. 图片溢出隐藏
当图片大小超出容器时,可以使用 overflow: hidden
属性来隐藏溢出部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Overflow</title>
<style>
.container {
width: 200px;
height: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<img src="https://www.geek-docs.com/image.jpg" alt="Geek Docs">
</div>
</body>
</html>
Output:
4. 图片溢出拉伸
如果希望图片溢出时拉伸填充容器,可以使用 object-fit: cover
属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Overflow</title>
<style>
.container {
width: 200px;
height: 200px;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="container">
<img src="https://www.geek-docs.com/image.jpg" alt="Geek Docs">
</div>
</body>
</html>
Output:
盒子超出
5. 盒子溢出隐藏
当盒子内容超出容器时,可以使用 overflow: hidden
属性来隐藏溢出部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box Overflow</title>
<style>
.container {
width: 200px;
height: 200px;
overflow: hidden;
}
.box {
width: 300px;
height: 300px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Output:
6. 盒子溢出滚动
如果希望盒子内容溢出时可以滚动查看,可以使用 overflow: auto
属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box Overflow</title>
<style>
.container {
width: 200px;
height: 200px;
overflow: auto;
}
.box {
width: 300px;
height: 300px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Output:
表格超出
7. 表格溢出隐藏
当表格内容超出容器时,可以使用 overflow: hidden
属性来隐藏溢出部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Overflow</title>
<style>
.container {
width: 200px;
height: 200px;
overflow: hidden;
}
table {
width: 300px;
}
</style>
</head>
<body>
<div class="container">
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</div>
</body>
</html>
Output:
8. 表格溢出滚动
如果希望表格内容溢出时可以滚动查看,可以使用 overflow: auto
属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Overflow</title>
<style>
.container {
width: 200px;
height: 200px;
overflow: auto;
}
table {
width: 300px;
}
</style>
</head>
<body>
<div class="container">
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</div>
</body>
</html>
Output:
列表超出
9. 列表溢出隐藏
当列表内容超出容器时,可以使用 overflow: hidden
属性来隐藏溢出部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>List Overflow</title>
<style>
.container {
width: 200px;
height: 200px;
overflow: hidden;
}
ul {
width: 300px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</body>
</html>
Output:
10. 列表溢出滚动
如果希望列表内容溢出时可以滚动查看,可以使用 overflow: auto
属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>List Overflow</title>
<style>
.container {
width: 200px;
height: 200px;
overflow: auto;
}
ul {
width: 300px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</body>
</html>
Output:
行内元素超出
11. 行内元素溢出隐藏
当行内元素内容超出容器时,可以使用 overflow: hidden
属性来隐藏溢出部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline Element Overflow</title>
<style>
.container {
width: 200px;
height: 50px;
overflow: hidden;
}
span {
white-space: nowrap;
}
</style>
</head>
<body>
<div class="container">
<span>This is a long inline element that will be truncated with an ellipsis.</span>
</div>
</body>
</html>
Output:
12. 行内元素溢出换行显示省略号
如果希望行内元素溢出后换行显示省略号,可以使用 white-space: normal
属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline Element Overflow</title>
<style>
.container {
width: 200px;
height: 50px;
overflow: hidden;
}
span {
white-space: normal;
}
</style>
</head>
<body>
<div class="container">
<span>This is a long inline element that will be truncated with an ellipsis.</span>
</div>
</body>
</html>
Output:
多行文本超出
13. 多行文本溢出显示省略号
当多行文本内容超出容器时,可以使用 -webkit-line-clamp
和 display: -webkit-box
属性来显示省略号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multi-line Text Overflow</title>
<style>
.container {
width: 200px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
This is a long multi-line text that will be truncated with an ellipsis. This is a long multi-line text that will be truncated with an ellipsis. This is a long multi-line text that will be truncated with an ellipsis.
</div>
</body>
</html>
Output:
14. 多行文本溢出换行显示省略号
如果希望多行文本溢出后换行显示省略号,可以使用 display: -webkit-box
和 -webkit-line-clamp
属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multi-line Text Overflow</title>
<style>
.container {
width: 200px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
This is a long multi-line text that will be truncated with an ellipsis. This is a long multi-line text that will be truncated with an ellipsis. This is a long multi-line text that will be truncated with an ellipsis.
</div>
</body>
</html>
Output:
绝对定位元素超出
15. 绝对定位元素溢出隐藏
当绝对定位元素内容超出容器时,可以使用 overflow: hidden
属性来隐藏溢出部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Absolute Position Element Overflow</title>
<style>
.container {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.absolute {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="container">
<div class="absolute"></div>
</div>
</body>
</html>
Output:
16. 绝对定位元素溢出滚动
如果希望绝对定位元素内容溢出时可以滚动查看,可以使用 overflow: auto
属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Absolute Position Element Overflow</title>
<style>
.container {
position: relative;
width: 200px;
height: 200px;
overflow: auto;
}
.absolute {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="container">
<div class="absolute"></div>
</div>
</body>
</html>
Output:
以上是关于如何处理内容超出容器的一些常见情况的示例代码,通过合理运用 CSS 属性,可以有效地控制内容的显示效果,提升用户体验。