在网站设计中，经常需要展示较多的文本内容，但由于页面空间的限制，可能需要将一部分内容隐藏起来，以保证页面的整洁和美观。而CSS的隐藏显示功能就能帮助我们实现这一需求。但当内容超过一行时，隐藏显示就面临一些问题，本文将详细讲解如何解决这些问题。
一、CSS的隐藏显示功能
CSS中的display属性可以控制元素的显示方式，常用的值有block、inline、inline-block、none等。其中，display:none可以将元素完全隐藏起来，不占用任何页面空间，也不会响应用户的交互事件，是实现隐藏显示的主要方式。
当需要隐藏部分文本内容时，我们可以将这些内容放在一个容器元素中，然后将该容器元素的高度设置为0，再将overflow属性设置为hidden，这样就能将内容隐藏起来，同时也不会占用页面空间。
但当需要隐藏的内容超过一行时，以上方法就会出现问题，因为在容器元素高度为0的情况下，只能隐藏一整行的内容，无法实现对一行中的部分内容进行隐藏。这时，我们需要采用一些其他的方法来实现对超过一行的内容的隐藏显示。
二、解决方法
1.使用text-overflow属性
text-overflow属性可以控制在文本溢出容器时如何显示，常用的值有ellipsis、clip和string。其中，ellipsis表示用省略号来表示被隐藏的文本，clip表示将文本裁剪掉，而string表示将文本以指定的字符串来替换被隐藏的部分。
我们可以将容器元素的宽度设置为固定值，然后将text-overflow属性设置为ellipsis，这样就能实现对超过一行的内容的隐藏显示。但需要注意的是，该方法只能应用于单行文本的隐藏显示，对于多行文本仍然无法实现。
2.使用CSS3的多列布局
CSS3的多列布局可以将文本分成多列显示，从而实现对多行文本的隐藏显示。我们可以将容器元素的高度设置为固定值，然后将column-count属性设置为2或更多，这样就能将文本分成多列显示，从而实现隐藏显示。
但需要注意的是，该方法需要浏览器支持CSS3的多列布局特性，同时也会影响到文本的排版，需要进行适当的调整。
3.使用JavaScript实现
当以上方法无法满足需求时，我们可以使用JavaScript来实现隐藏显示功能。具体实现方法如下：
（1）将需要隐藏的文本内容放在一个容器元素中，将该容器元素的高度设置为0，overflow属性设置为hidden。
（2）通过JavaScript获取容器元素
（3）计算容器元素中文本的行数，可以通过以下代码实现：
var lineHeight = parseFloat(window.getComputedStyle(container).getPropertyValue('line-height'));
var containerHeight = parseFloat(window.getComputedStyle(container).getPropertyValue('height'));
var textHeight = container.scrollHeight;
var lineCount = Math.round(textHeight / lineHeight);
其中，lineHeight表示每行文本的高度，containerHeight表示容器元素的高度，textHeight表示容器元素中文本的高度，lineCount表示文本的行数。
（4）根据需要显示的行数，计算出需要显示的文本高度，将容器元素的高度设置为该高度，即可实现对超过一行的内容的隐藏显示。具体代码如下：
var targetHeight = lineHeight * desiredLineCount;
container.style.height = targetHeight + 'px';
需要注意的是，该方法需要在页面加载完成后再执行，以保证容器元素已经被渲染出来。同时，由于需要通过JavaScript来计算文本的行数和高度，该方法对性能有一定影响，需要进行适当的优化。
三、总结
CSS的隐藏显示功能可以帮助我们实现对页面中文本内容的隐藏和显示，但当需要隐藏的内容超过一行时，常用的方法无法满足需求。通过使用text-overflow属性、CSS3的多列布局或JavaScript实现，我们可以实现对超过一行的内容的隐藏显示。需要根据具体的需求选择适合的方法，并进行适当的优化，以达到最佳的效果和性能。