在网页开发中，文本溢出是常见的问题，尤其是当文本内容超过容器的宽度或高度时。下面分别介绍单行文本和多行文本溢出的处理方式。
单行文本溢出处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.single-line {
width: 200px;
/* 强制文本在一行内显示 */
white-space: nowrap;
/* 隐藏溢出的内容 */
overflow: hidden;
/* 当文本溢出时显示省略号 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="single-line">
这是一段很长的单行文本，当它超出容器宽度时会显示省略号。
</div>
</body>
</html>
- white-space: nowrap; ：强制文本在一行内显示，不换行。
- overflow: hidden; ：隐藏超出容器宽度的内容。
- text-overflow: ellipsis; ：当文本溢出时，在溢出的位置显示省略号。
多行文本溢出处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.multi-line {
width: 200px;
/* 设置为弹性伸缩盒子模型 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
/* 隐藏溢出的内容 */
overflow: hidden;
}
</style>
</head>
<body>
<div class="multi-line">
这是一段很长的多行文本，当它超出容器高度时会显示省略号。这是一段很长的多行文本，当它超出容器高度时会显示省略号。
</div>
</body>
</html>
- display: -webkit-box; ：将元素设置为弹性伸缩盒子模型。
- -webkit-line-clamp: 3; ：限制文本显示的行数为 3 行。
- -webkit-box-orient: vertical; ：设置子元素的排列方式为垂直排列。
- overflow: hidden; ：隐藏超出容器高度的内容。
