当前位置：首页 > news >正文

css内容省略——text-overflow: ellipsis

news 2025/5/10 15:39:16

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+）