菜鸟教程
教程 css tutorial

内容省略

在网页设计中，当文本长度超出容器时，常使用 CSS 实现“内容省略”，用 ... 表示未展示的部分，以防止布局错乱。

1. 单行文本省略

css 
.ellipsis {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}

示例：

html 
<div class="ellipsis" style="width: 200px;">
  这是一段非常长非常长的文本，应该被截断并显示省略号。
</div>

2. 多行文本省略（仅部分浏览器支持）

使用 -webkit-line-clamp 和 display: -webkit-box：

css 
.multiline-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制显示2行 */
  overflow: hidden;
}

示例：

html 
<div class="multiline-ellipsis" style="width: 300px;">
  多行文本省略是一种适用于长段内容的方式，当文本内容较多时，可以通过设置最大行数来控制显示。
</div>

内容省略示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8" />
<title>内容省略示例</title>
<style>
body {
font-family: sans-serif;
padding: 40px;
background-color: #f5f5f5;
}


.example {
  margin-bottom: 40px;
}

.ellipsis {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #ccc;
  padding: 10px;
  background: #fff;
}

.multiline-ellipsis {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  border: 1px solid #ccc;
  padding: 10px;
  background: #fff3e0;
}



</style>
</head>


<body>
<div class="example">
<strong>单行文本省略：</strong>
<div class="ellipsis">
这是一个很长的单行文本示例，应该显示省略号来处理超出部分内容。
</div>
</div>


<div class="example">
<strong>多行文本省略：</strong>
<div class="multiline-ellipsis">
这是一个多行省略的文本示例，适合用于新闻列表、简介说明、内容摘要等场景，在指定行数后内容自动截断。
</div>
</div>
</body>


</html>

相关内容