css怎么实现超出三行则只显示一行

段落1： 实现"超出三行则只显示一行"功能的常用方法是使用CSS的text-overflow样式属性。通过使用text-overflow配合overflow和white-space属性，可以实现对文本的截取与省略。以下是一个基本的text-overflow实现示例：

示例 1：

原文本：This is a long text that will be truncated if it exceeds three lines.

css 代码：

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

解释：

在该示例中，使用了CSS的display、-webkit-box-orient和-webkit-line-clamp属性将文本行数限制为3行，overflow属性是指超出这个限制的文本应该怎么样处理（在这里是隐藏），text-overflow属性中的ellipsis值是指超出限制的文本应该显示的省略符号（“.”，三个点）。

段落2： 使用text-overflow时，我们可能会遇到一些问题，比如text-overflow无法对单行文本进行截取，或者文本中包含行内元素（如超链接）时会出现一些意想不到的效果。以下是一个解决方案示例：

示例 2：

原文本：This is a long text with a link that will be truncated if it exceeds three lines.

css 代码：

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

p a {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

解释：

在这个示例中，我们通过对超链接进行一些特殊处理来解决了上一个示例中的问题。具体地，在p元素中使用text-overflow来进行截取和省略，同时，对于超链接，使用display、max-width、overflow和white-space属性来限制它的大小并且强制单行显示。

段落3： 除了text-overflow，我们还可以使用一些CSS3新增的属性来处理文本的截取和省略。如word-wrap、word-break属性、overflow-wrap等。以下示例演示了如何使用这些属性：

示例 3：

原文本：This is a long text that contains a very long word which cannot be broken and should be truncated at the end of the line if it exceeds three lines.

css 代码：

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-all;
}

解释：

在这个示例中，我们给p元素添加了word-wrap、word-break两个属性，用于控制单词的截断和换行。注意，这样做需要将元素的display属性设置为-webkit-box，同时使用-webkit-line-clamp控制行数。需要注意的是，在某些浏览器（如Safari）中，可能需要添加一些厂商前缀才能生效。

段落4： 最后一个示例是使用JavaScript动态处理文本截取和省略的方法。这种方法相对来说比较灵活，但并不是纯CSS解决方案，有一定的局限性。

示例 4：

原文本：This is a long dynamic text that will be truncated if it exceeds three lines.

html 代码：

This is a long dynamic text that will be truncated if it exceeds three lines.
Truncate Text

javascript 代码：

function truncateText() {
  var dynamicText = document.getElementById('dynamic-text');
  var computedStyle = window.getComputedStyle(dynamicText);
  var lineHeight = parseInt(computedStyle.lineHeight);
  var maxHeight = lineHeight * 3;
  var text = dynamicText.textContent;

  while (dynamicText.offsetHeight > maxHeight) {
    text = text.slice(0, -1);
    dynamicText.textContent = text + '...';
  }
}

解释：

这个示例演示了一个动态截取文本的方法。在该示例中，我们使用了JavaScript来获取文本的计算样式，计算其行高并且根据实际高度来进行动态截取。注意，使用这种方法需要有一定的计算量，因此不太适用于大量文本处理。

总结： 本文介绍了几种实现“超出三行则只显示一行”的解决方案，包括了纯CSS的text-overflow属性、同时针对超链接进行特殊处理、使用CSS3的word-wrap、word-break属性，以及使用JavaScript动态处理文本截取和省略的方法等。使用哪种方法取决于实际情况，需要根据实际应用场景进行选择。如果只是对少量文本进行处理，使用纯CSS解决方案是最简单的选择；如果需要对大量文本进行处理，可以考虑使用JavaScript或者一些CSS3新增属性。