CSS 如何设置元素的高度为固定行数的文本

在本文中，我们将介绍如何使用CSS来设置元素的高度，使其能够显示固定行数的文本。这对于网页设计中的排版以及响应式设计非常有用，可以确保文本在不同屏幕尺寸下的一致性。

阅读更多：CSS 教程

方法1：使用固定高度和行高

一种常见的方法是通过设置元素的固定高度和行高来实现固定行数的文本显示。可以通过以下CSS属性来实现：

.container {
  height: 100px; /* 设置容器的高度 */
  line-height: 20px; /* 设置每行文本的行高 */
  overflow: hidden; /* 设置溢出内容不可见 */
}

上述代码中，我们将容器的高度设置为100px，行高设置为20px。这样容器内的文本将按照每行20px的高度进行排列，同时超出容器高度的文本将被隐藏。但是这种方法存在一个问题，就是文本的行数可能因为字体的不同而发生变化。

方法2：使用伪元素和max-height

为了解决上述问题，我们可以使用伪元素和max-height属性结合的方法。通过设置伪元素成块级元素的高度，然后利用max-height属性限制元素的最大高度，从而实现固定行数的文本显示。

具体实现代码如下：

.container {
  max-height: 80px; /* 设置容器的最大高度 */
  overflow: hidden; /* 设置溢出内容不可见 */
  position: relative;
}

.container::after {
  content: "";
  display: block; /* 将伪元素设为块级元素 */
  height: 100%; /* 设置伪元素的高度和容器一样 */
  visibility: hidden; /* 设置伪元素不可见 */
}

上述代码中，我们首先设置了容器的最大高度为80px，并将超出容器高度的内容隐藏。然后通过伪元素设置一个和容器高度一样的块级元素，并设置伪元素不可见。这样就可以通过控制容器的实际高度来实现固定行数的文本显示。

示例

下面我们通过一个示例来展示上述两种方法的效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container1 {
      height: 100px;
      line-height: 20px;
      overflow: hidden;
    }

    .container2 {
      max-height: 80px;
      overflow: hidden;
      position: relative;
    }

    .container2::after {
      content: "";
      display: block;
      height: 100%;
      visibility: hidden;
    }
  </style>
  <title>CSS Set Element Height</title>
</head>
<body>
  <div class="container1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis feugiat vulputate. Donec vitae tristique nisi. Nullam auctor ligula ac leo sagittis congue. Mauris maximus mi nec nunc aliquam tristique. Integer a erat tortor. Nam ac venenatis odio. Vestibulum in tortor vitae purus rutrum tempus eget non ante. Nunc hendrerit mauris at imperdiet sagittis. Sed nec blandit nunc.
  </div>

  <div class="container2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis feugiat vulputate. Donec vitae tristique nisi. Nullam auctor ligula ac leo sagittis congue. Mauris maximus mi nec nunc aliquam tristique. Integer a erat tortor. Nam ac venenatis odio. Vestibulum in tortor vitae purus rutrum tempus eget non ante. Nunc hendrerit mauris at imperdiet sagittis. Sed nec blandit nunc.
  </div>
</body>
</html>

在上述示例中，我们创建了两个容器，分别采用了两种不同的设置方法。第一个容器使用了固定高度和行高的方法，第二个容器使用了伪元素和max-height属性的方法。运行代码后，可以观察到第一个容器显示了固定行数的文本，而第二个容器根据设置的最大高度自动调整文本的显示行数。