title: css内容省略
date: 2025-05-07 19:41:17
tags: css
text-overflow: ellipsis
text-overflow: ellipsis用于在文本溢出容器时显示省略号(…)
1.单行省略
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单行文本省略示例</title>
<style>
.ellipsis {
width: 200px;
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */
border: 1px solid #ccc;
padding: 8px;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="ellipsis">
这是一段很长的文本内容，当超出容器宽度时会显示省略号...
</div>
<div class="ellipsis">
短文本
</div>
</body>
</html>
2.多行文本省略（CSS3方法）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多行文本省略示例</title>
<style>
.multiline-ellipsis {
width: 300px;
display: -webkit-box; /* 老版本语法 */
-webkit-line-clamp: 3; /* 显示行数,超过就在第三行末尾显示省略号 */
-webkit-box-orient: vertical; /* 垂直排列 */
overflow: hidden; /* 隐藏溢出 */
text-overflow: ellipsis; /* 显示省略号 */
border: 1px solid #ccc;
padding: 8px;
margin: 20px 0;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="multiline-ellipsis">
这是一段很长的多行文本内容。当文本超过指定的行数时，会在最后一行显示省略号。
这个方法使用了CSS3的-webkit-line-clamp属性，目前在现代浏览器中支持良好。
需要注意这是非标准属性，但在实际项目中广泛使用。
</div>
</body>
</html>
3.表格单元格中的文本省略
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格文本省略示例</title>
<style>
table {
width: 400px;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
.ellipsis-cell {
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>产品名称</th>
<th>描述</th>
</tr>
<tr>
<td>1</td>
<td>笔记本电脑</td>
<td class="ellipsis-cell">这是一款高性能笔记本电脑，配备最新处理器和大容量内</td>
</tr>
<tr>
<td>2</td>
<td>智能手机</td>
<td class="ellipsis-cell">最新款智能手机，具有超高像素摄像头和长续航电池</td>
</tr>
</table>
</body>
</html>
4. 响应式设计中的文本省略
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式文本省略示例</title>
<style>
.responsive-ellipsis {
width: 100%;
max-width: 400px;
margin: 20px auto;
padding: 15px;
background: #f5f5f5;
border-radius: 4px;
}
.responsive-ellipsis h3 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 10px;
}
.responsive-ellipsis p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5;
}
@media (max-width: 480px) {
.responsive-ellipsis p {
-webkit-line-clamp: 2;
}
}
</style>
</head>
<body>
<div class="responsive-ellipsis">
<h3>这是一个非常非常长的标题，在小屏幕上会被截断并显示省略号</h3>
<p>
这里是详细内容描述。在较大的屏幕上，我们会显示最多3行文本，超过部分显示省略号。
而在移动设备上（宽度小于480px），我们只显示2行文本。
这样可以确保在不同设备上都有良好的阅读体验，同时保持布局整洁。
</p>
</div>
</body>
</html>
关键点总结
- 必须配合的属性：
white-space: nowrap（单行）overflow: hidden- 固定宽度或最大宽度
- 多行省略的限制：
- 使用
-webkit-line-clamp（非标准属性但广泛支持） - 需要
display: -webkit-box或display: -webkit-inline-box
- 使用
- 浏览器兼容性：
- 单行省略：所有主流浏览器支持
- 多行省略：现代浏览器支持（Chrome, Safari, Edge, Firefox 68+）