CSS控制多行文字超出隐藏加省略号

2018-11-01    来源:学做网站论坛

容器云强势上线!快速搭建集群,上万Linux镜像随意使用

在前面的建站教程中,我们介绍了HTML+CSS控制文字超出部分省略号,如果一行文字的数量超过一定的宽度就会隐藏并显示省略号。今天我们要介绍的功能是CSS控制多行文字超出隐藏加省略号,例如二行、三行文字超出隐藏加省略号。这种功能常用于企业网站制作教程中。效果如下:

dh

代码如下:


<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>文字超过两行或三行就显示省略号</title>
<style type="text/css">
.p1{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<p class="p1">
学做网站论坛经过多年的发展,总结出“高清视频教程+讲师一对一在线辅导解惑”的教学模式,学员参加建站培训之后,获得学做网站论坛终生VIP权限,并分配各自的辅导老师。通过VIP权限进入VIP培训区学习论坛原创录制的高清视频教程(教程为张启亚老师原创录制的超详细,一步一步操作演示的系列课程),让零基础的学员学习起来基础无压力。另外在学习过程中有任何不明白的,可以在线咨询辅导老师单独讲解和QQ在线演示,充分保证了论坛学员学会各类网站制作方法。
长达5年的培训实践,接触众多学员网站成长案例,不断的去聆听和总结,我们紧随互联网发展步伐,逐步完善课程内容,推出符合时代主流的网站制作课程。对于新推出的课程,全部免费公开于已加入的VIP学员,学员只需缴纳一次学费之后,可以完全免费的学习不断更新的课程,不会再收取任何费用。
</p>
</body>
</html>

标签: isp 代码 互联网 建站 建站教程 企业网站 权限 网站制作 网站制作教程

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点!
本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。

上一篇:Dreamweaver代码自动提示功能启用方法

下一篇:网站animite动画载入效果制作步骤