CSS 限制div高度在其中的文本内容两行内

在本文中，我们将介绍如何使用CSS限制一个div元素的高度，使其只能显示两行文本内容。

为了实现这个需求，我们将使用以下CSS属性和技巧：

阅读更多：CSS 教程

max-height属性

首先，我们可以使用max-height属性来限制div的最大高度。通过将max-height设置为一个固定的像素值或百分比值，我们可以确保div的高度不会超过这个限制。

例如，我们可以使用以下代码来将一个div的最大高度设置为200像素：

div {
  max-height: 200px;
}

然而，这样做只是简单地限制了div的高度，并没有限制其内部文本的行数。接下来，我们将介绍一种基于行数的方法。

line-clamp属性

在CSS中，我们可以使用line-clamp属性来限制一个元素内部文本的行数。使用line-clamp时，我们还需要配合其他一些属性来确保兼容性。

首先，我们需要将元素的display属性设置为-webkit-box，-moz-box或者box。接着，我们将其-webkit-box-orient属性设置为vertical，-moz-box-orient或者box-orient设置为inline-axis。最后，我们设置-webkit-line-clamp属性为所需的行数。

以下是一个示例代码，展示了如何将一个div的文本内容限制在两行内：

div {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

这段代码将把div内部文本内容限制在两行，并将超出的部分隐藏起来。

需要注意的是，line-clamp属性目前只在WebKit浏览器中有效，包括Safari和Chrome等。为了保持兼容性，我们可以通过添加其他前缀来适应其他浏览器。

JavaScript解决方案

如果我们需要支持更多浏览器或者动态调整行数，我们可以使用JavaScript来解决这个问题。

首先，我们需要获取该div元素的高度和行高。然后，通过计算行数，我们可以确定应该显示多少行文本。

以下是一个使用JavaScript实现的示例代码：

var div = document.getElementById('myDiv');
var lineHeight = parseInt(getComputedStyle(div).lineHeight);
var maxHeight = 2 * lineHeight;

if (div.clientHeight > maxHeight) {
  var text = div.textContent;

  while (div.clientHeight > maxHeight) {
    text = text.replace(/W*s(S)*$/, '...');
    div.textContent = text;
  }
}

这段代码将获取div的行高和高度，并逐步减少文本内容，直到div的高度小于我们设定的最大高度。

需要注意的是，这种JavaScript解决方案需要在窗口大小改变或者文本内容改变时进行重计算。