实现CSS文本超出两行显示省略号效果

要在CSS中设置文本超出两行后显示省略号(ellipsis),你需要使用一些特定的CSS属性和技巧,因为CSS本身并没有直接支持超出指定行数后显示省略号的属性。然而,你可以通过结合伪元素和line-clamp属性来实现类似的效果。

图片[1]_实现CSS文本超出两行显示省略号效果_知途无界

下面是一个示例代码,展示了如何设置文本超出两行后显示省略号:

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Text Ellipsis after 2 Lines</title>  
<style>  
  .ellipsis {  
    display: -webkit-box;  
    -webkit-line-clamp: 2;  
    -webkit-box-orient: vertical;  
    overflow: hidden;  
    text-overflow: ellipsis;  
  }  
</style>  
</head>  
<body>  
  
<div class="ellipsis">  
  这是一段很长的文本,当文本内容超出两行时,将会显示省略号来表示文本被截断。  
</div>  
  
</body>  
</html>

在上面的示例中,我们创建了一个带有类名ellipsisdiv元素,并为其应用了一些CSS样式。-webkit-line-clamp属性用于限制文本显示的行数,这里我们设置为2行。-webkit-box-orient: vertical;确保文本在垂直方向上排列。overflow: hidden;隐藏超出容器的文本内容,而text-overflow: ellipsis;则在文本被截断时显示省略号。

需要注意的是,-webkit-line-clamp属性是一个非标准的WebKit属性,因此它主要在基于WebKit的浏览器中有效(如Chrome和Safari)。对于其他浏览器,你可能需要寻找其他解决方案或使用JavaScript来实现类似的效果。

此外,你还需要确保容器的宽度足够小,以便文本在达到两行时就被截断。如果容器宽度过大,文本可能会在一行内显示完整,而不会触发省略号效果。因此,你可能需要设置容器的宽度或使用其他布局技巧来控制文本的显示方式。

© 版权声明
THE END
喜欢就点个赞,支持一下吧!
点赞34 分享
评论 抢沙发
头像
欢迎您留下评论!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容