css超出两行显示省略号

www.jswusn.com CSS 2024-09-29 09:31:53 31次浏览
网站首页 >> 技术分享 >> CSS

1. css超出两行显示省略号

在CSS中实现文本超出两行后显示省略号的效果通常涉及到使用一些特定的CSS属性，尤其是WebKit特有的属性。

下面是一个详细的步骤说明，包括CSS和HTML代码示例。

1.1. CSS代码示例

首先，我们需要定义一个CSS类来控制文本的显示行为。这个类将会限制文本只显示两行，并在第三行开始的地方显示省略号。

为了兼容不同浏览器，我们使用WebKit的前缀属性 -webkit-line-clamp 和标准的 line-clamp 属性。

此外，我们还需要使用 -webkit-box 和 -webkit-box-orient 来定义一个弹性盒子布局，以便能够正确地裁剪文本。

 .multi-line-ellipsis {
  display: -webkit-box;          /* 使用弹性盒子模型 */
  -webkit-line-clamp: 2;        /* 限制显示的行数为2行 */
  -webkit-box-orient: vertical; /* 设置子元素垂直堆叠 */
  overflow: hidden;             /* 隐藏超出的内容 */
  text-overflow: ellipsis;      /* 当内容被裁剪时显示省略号 */
}

1.2. HTML代码示例

接下来，我们需要在HTML中应用这个CSS类。假设我们有一个包含大量文本的<div>标签，我们可以这样使用：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Line Ellipsis Example</title>
<style>
  .multi-line-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px; /* 设置一个固定宽度 */
  }
</style>
</head>
<body>
<div class="multi-line-ellipsis">
  这是一段很长的文字，它可能会超出容器的边界，这时候我们就需要让文字只显示两行之后就用省略号表示。这段文字非常长，以至于肯定会被截断。
</div>
</body>
</html>

1.3. 注意事项

固定宽度：确保容器具有一个固定的宽度，否则text-overflow: ellipsis可能不会生效。
WebKit前缀：虽然-webkit-line-clamp是一个WebKit特有的属性，但许多现代浏览器已经开始支持无前缀的line-clamp。因此，在实际项目中，推荐同时使用这两个属性以提高兼容性。
回退方案：对于不支持这些属性的老式浏览器，可能需要提供一个回退方案，例如使用JavaScript来实现类似的功能。