1.让文字超出段落后省略号显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>让文字超出段落后省略号显示</title> <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css"/> </head> <style> .fath{ width: 200px; height: 60px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /* 这个表示要显示几行 */ -webkit-box-orient: vertical; } </style> <div class="fath"> 奥斯卡放假哈算了的空间发哈谁 的空间发挥拉克丝静电防护卢卡 斯多久发货卡萨丁金凤花开罗萨 多就发火了卡萨丁姐夫回来撒看 多就发奥斯卡奖发给束带结发看 请问有肉去啊为鱼肉去我有肉啊 多就发火了卡萨丁姐夫回来撒看 多就发火了卡萨丁姐夫回来撒看 </div> <!-- 说明： -webkit-line-clamp： 限制在一个块元素显示的文本的行数。 -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。 box-orient 属性规定框的子元素应该被水平或垂直排列。简单列举两个: 值horizontal:在水平行中从左向右排列子元素。 vertical:从上向下垂直排列子元素。 --> <script type="text/javascript" src="jquery/jquery.min.js"></script> <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script> <script type="text/javascript"> </script> </body> </html> 效果：
2、
