利用CSS实现简易的多行文本超出时缩略的效果（附示例）
display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: /*line*/;
场景使用示例1：
-- 代码
<style>
.test-para {
width: 200px;
}
.line-ellipsis {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
</style>
<body>
<p class="test-para line-ellipsis">《百年孤独》，是哥伦比亚作家加西亚·马尔克斯创作的长篇小说，是其代表作，也是拉丁美洲魔幻现实主义文学的代表作，被誉为“再现拉丁美洲历史社会图景的鸿篇巨著”。</p>
</body>
-- 效果图
场景使用示例2：
-- 代码
<style> /* Reset */ p { margin: 0; } /* Els */ .test-para-container { width: 200px; padding: 10px; background-color: powderblue; } .test-para { border: 1px solid tomato; } .line-ellipsis { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } </style> <body> <div class="test-para-container"> <p class="test-para line-ellipsis">《百年孤独》，是哥伦比亚作家加西亚·马尔克斯创作的长篇小说，是其代表作，也是拉丁美洲魔幻现实主义文学的代表作，被誉为“再现拉丁美洲历史社会图景的鸿篇巨著”。</p> </div> </body>
-- 效果图
