CSS给超出去的文本隐藏并添加省略号

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">   
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>  
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />       
<title>给超出去的文本隐藏并添加省略号</title>
<style type="text/css">
html {height: 100%;}
body {width:200px;height: 100%;position: relative;padding: 0;margin: 0;}
.m-super-msg-text{display: -webkit-box;max-height: 54px;line-height: 18px; font-size: 12px;text-align:justify;color: #838791;letter-spacing: 0;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 3;-webkit-box-orient: vertical;word-break: break-all;}
</style>
</head>
<body>
<div class="m-super-msg-text">
一位好的Web前端开发工程师在知识体系上既要有广度,又要有深度,所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。现在说的重点不在于讲解技术,而是更侧重于对技巧的讲解。技术非黑即白,只有对和错,而技巧则见仁见智。以前会Photoshop和Dreamweaver就可以制作网页,现在只掌握这些已经远远不够了。无论是开发难度上,还是开发方式上,现在的网页制作都更接近传统的网站后台开发,所以现在不再叫网页制作,而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要,而且需要专业的前端工程师才能做好,这方面的专业人才近两年来备受青睐。Web前端开发是一项很特殊的工作,涵盖的知识面非常广,既有具体的技术,又有抽象的理念。简单地说,它的主要职能就是把网站的界面更好地呈现给用户。
</div>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<script>
</script>
</body>
</HTML>

猜你喜欢

转载自blog.csdn.net/soulcabin/article/details/81137562