1. 背景介绍
CSS（Cascading Style Sheets，级联样式表）是用于定义Web页面的外观样式的语言，通常与HTML（Hypertext Markup Language，超文本标记语言）结合使用。在Web页面中，通常需要设置文本显示的高度并将超出部分隐藏，本文主要介绍如何实现这个功能。
2. 实现方式
2.1 使用CSS的overflow属性
overflow属性用于设置元素内容溢出时的处理方法。当元素内容超出其指定的高度或宽度时，会出现溢出的情况。
overflow属性的值可以是以下四种：
visible：默认值，不限制元素的大小，元素内容可能会溢出到其容器之外。
hidden：隐藏超出元素大小的部分，不显示溢出的内容。
scroll：显示滚动条，即使内容没有溢出。
auto：如果元素的内容溢出，则显示滚动条。
因此，我们可以使用CSS的overflow属性来实现文本显示高度并隐藏超出部分的效果。
.container {
height: 100px; /* 设置容器高度 */
overflow: hidden; /* 隐藏超出容器高度的内容 */
}
上述代码中，容器高度设置为100px，超出部分被隐藏。
2.2 使用CSS的text-overflow属性
text-overflow属性用于设置元素内容溢出时的文本显示方式，主要应用于单行文本的情况。
text-overflow属性的值可以是以下三种：
clip：默认值，显示省略号（...）来代表被修剪文本。
ellipsis：显示省略号（...）来代表被修剪文本。
string：在被修剪的文本后面加上自定义的字符串。
我们可以结合使用overflow和text-overflow属性来实现文本显示高度并隐藏超出部分以及使用省略号代表被修剪文本的效果。
.container {
height: 50px; /* 设置容器高度 */
overflow: hidden; /* 隐藏超出容器高度的内容 */
text-overflow: ellipsis; /* 显示省略号代表被修剪文本 */
white-space: nowrap; /* 防止在单行文本中换行 */
}
上述代码中，容器高度设置为50px，并使用overflow和text-overflow属性来实现文本显示高度并隐藏超出部分以及使用省略号代表被修剪文本的效果。
3. 示例演示
下面是一个使用overflow属性实现文本显示高度并隐藏超出部分的示例。
这是一段超过容器高度的文本，超出部分被隐藏。
.container {
height: 50px;
overflow: hidden;
}
下面是一个使用text-overflow属性实现文本显示高度并隐藏超出部分以及使用省略号代表被修剪文本的示例。
这是一段超过容器高度的文本，超出部分被隐藏，使用省略号代表被修剪文本。
.container {
height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
4. 总结
本文介绍了如何使用CSS设置文本显示高度并隐藏超出部分，主要使用了CSS的overflow和text-overflow属性。
使用overflow属性可以隐藏超出容器高度的部分。
使用text-overflow属性可以在单行文本中使用省略号代表被修剪文本。
这些属性可以很好地控制文本的显示高度并隐藏超出部分，从而优化Web页面的排版效果。