\
\
<! DOCTYPEhtml>
<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>CSS multiple lines of text beyond hidden plus ellipsis</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">Super gift package, containing all goods, half price discount, economic benefits! Super gift package, containing all goods, half price discount, economic benefits! Super gift package, containing all goods, half price discount, economic benefits!</div>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<script>
</script>
</body>
</html>
Copy the code\