1.文本折行：单行折行
代码演示：
点击查看代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>单行折行</title><style>.text {width: 300px;border: 1px solid #999;padding: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}</style>
</head>
<body><div class="text">这是一段超长的测试文本，用来演示单行折行效果，宽度不够时会自动隐藏并显示省略号...</div>
</body>
</html>
效果图：
2.多行折行
代码演示：
点击查看代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>三行折行</title><style>.text {width: 300px;border: 1px solid #999;padding: 8px;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}</style>
</head>
<body><div class="text">这是一段超长的测试文本，用来演示三行折行效果。内容会自动换行，最多只显示三行，超出部分会自动隐藏并在末尾显示省略号，非常适合文章摘要、商品简介等场景使用。</div>
</body>
</html>
效果图：
