内容纲要
前言
在前端开发中，我们常常会遇到这样一个需求：在页面上显示一段文本，但我们只想展示固定行数的内容，超出部分通过滚动条来查看。这种场景在消息列表、日志输出窗口或评论框中经常见到。
本文将结合一个具体示例，详细介绍如何实现这样的效果——通过 CSS 控制一个 div 元素只显示 5 行内容，超出的部分通过滚动条查看。
实现思路
首先，我们需要理解如何通过 CSS 来控制文本显示的行数。最关键的两点是：
- 设置行高（
line-height）：通过设置line-height，我们可以控制每行文本的高度。 - 限制容器高度（
max-height）：通过限制容器的max-height，确保它只显示特定行数的文本内容。超出的部分将通过滚动条展示。
实现步骤
1. 设置 div 的基本样式
首先，我们需要为 div 设置一个合适的边框、填充、背景颜色等样式，使它能够正常显示文本内容。这里的 overflow-y: auto 是为了保证在内容超出容器高度时，自动出现垂直滚动条。
.text-area {
border: 1px solid #dcdfe6;
padding: 10px;
width: 400px;
overflow-y: auto; /* 当内容超出时，显示滚动条 */
background-color: #fff;
white-space: pre-wrap; /* 保持换行和空格 */
}2. 设置行高和最大高度
接下来，最重要的部分是如何控制文本显示的行数。这里我们使用 line-height 来设置每行文本的高度，假设每行高度为 1.5 倍的字体大小。同时，使用 max-height 来限制 div 的高度为 5 行的高度。
.text-area {
border: 1px solid #dcdfe6;
padding: 10px;
width: 400px;
overflow-y: auto;
background-color: #fff;
white-space: pre-wrap;
line-height: 1.5; /* 设置行高为1.5 */
max-height: calc(1.5em * 5); /* 最大高度限制为5行 */
}3. 使用 v-html 动态插入内容
在 Vue.js 项目中，我们可能需要通过绑定的数据动态展示文本内容。此时，可以使用 v-html 来渲染 HTML 格式的内容。
<div class="text-area" contenteditable="false" v-html="inputText"></div>4. 代码整体效果
以下是完整的 HTML 和 CSS 实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示固定行数的文本区域</title>
<style>
.text-area {
border: 1px solid #dcdfe6;
padding: 10px;
width: 400px;
overflow-y: auto;
background-color: #fff;
white-space: pre-wrap;
line-height: 1.5;
max-height: calc(1.5em * 5); /* 限制最大高度为5行 */
}
</style>
</head>
<body>
<div id="app">
<div class="text-area" contenteditable="false" v-html="inputText"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
el: '#app',
data: {
inputText: `这是第一行\n这是第二行\n这是第三行\n这是第四行\n这是第五行\n这是第六行，超出的部分应该通过滚动条查看。`
}
});
</script>
</body>
</html>关键点分析
line-height的作用：line-height控制每行文本的高度。通过设置line-height: 1.5，我们定义了每行文本的高度为字体大小的 1.5 倍。你可以根据实际需要调整这个值。max-height的作用：通过max-height来限制容器的最大高度。在本例中，我们使用了calc(1.5em * 5)，这表示容器的高度是 1.5 倍字体大小乘以 5 行的高度。如果行数超过5行，容器不会再增高，滚动条会自动出现。overflow-y: auto：这个属性保证了当内容超出容器高度时，自动出现滚动条。
实际应用场景
这种方式非常适用于需要展示大段文本内容的场景，例如：
- 聊天窗口：只显示最近的几条消息，超出部分通过滚动查看。
- 日志查看器：显示最新的日志，允许用户通过滚动查看历史记录。
- 评论区：只展示前几行评论，用户可以滚动查看完整内容。
总结
通过简单的 CSS 属性设置，我们可以轻松实现限制 div 显示特定行数并通过滚动条查看超出内容的效果。关键在于 line-height 和 max-height 的配合使用，以及滚动条的自动控制。这个技巧可以广泛应用于各种需要限制文本显示的场景，希望本文能为你在前端开发中提供有用的帮助。
