css最多显示两行（css文字只显示两行）

CSS 最多显示两行

简介

CSS（层叠样式表）是一种用于描述网页的外观和格式的语言。其中一个有用的功能是可以控制文本内容的行数，从而在有限的空间内呈现信息。

多级标题

设置行数

使用 `text-overflow` 属性

内容详细说明

1. 设置行数

要限制文本的行数，可以使用 `-webkit-line-clamp` 或 `line-clamp` 属性。这两个属性均接受一个数值作为参数，表示要显示的行数。例如，以下代码将文本限制为最多显示两行：```css p {-webkit-line-clamp: 2;line-clamp: 2; } ```

2. 使用 `text-overflow` 属性

`text-overflow` 属性可以控制文本溢出元素边界时的行为。使用 `ellipsis` 值可以显示省略号 (...) 来表示被截断的文本。以下代码将文本限制为最多显示两行，并使用省略号表示被截断的文本：```css p {-webkit-line-clamp: 2;line-clamp: 2;text-overflow: ellipsis; } ```

注意：

`-webkit-line-clamp` 属性是 Webkit 内核（例如 Safari 和 Chrome）的私有属性。

`line-clamp` 属性是 CSS 规范中的标准属性，但并非所有浏览器都支持。

对于需要在不同浏览器中保持一致性的项目，建议同时使用这两个属性。

示例

```html

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor bibendum felis, vel lobortis mi pulvinar sit amet. Nunc eu lectus nisl.

``````css p {-webkit-line-clamp: 2;line-clamp: 2;text-overflow: ellipsis; } ```

输出：

``` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor bibendum... ```

**CSS 最多显示两行****简介**CSS（层叠样式表）是一种用于描述网页的外观和格式的语言。其中一个有用的功能是可以控制文本内容的行数，从而在有限的空间内呈现信息。**多级标题*** 设置行数 * 使用 `text-overflow` 属性**内容详细说明****1. 设置行数**要限制文本的行数，可以使用 `-webkit-line-clamp` 或 `line-clamp` 属性。这两个属性均接受一个数值作为参数，表示要显示的行数。例如，以下代码将文本限制为最多显示两行：```css p {-webkit-line-clamp: 2;line-clamp: 2; } ```**2. 使用 `text-overflow` 属性**`text-overflow` 属性可以控制文本溢出元素边界时的行为。使用 `ellipsis` 值可以显示省略号 (...) 来表示被截断的文本。以下代码将文本限制为最多显示两行，并使用省略号表示被截断的文本：```css p {-webkit-line-clamp: 2;line-clamp: 2;text-overflow: ellipsis; } ```**注意：*** `-webkit-line-clamp` 属性是 Webkit 内核（例如 Safari 和 Chrome）的私有属性。 * `line-clamp` 属性是 CSS 规范中的标准属性，但并非所有浏览器都支持。 * 对于需要在不同浏览器中保持一致性的项目，建议同时使用这两个属性。**示例**```html

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor bibendum felis, vel lobortis mi pulvinar sit amet. Nunc eu lectus nisl.

``````css p {-webkit-line-clamp: 2;line-clamp: 2;text-overflow: ellipsis; } ```**输出：**``` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor bibendum... ```