使用clamp.js限制文本显示行数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>line-clampin</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/clamp.js"></script>
<style>
p {
width: 100px;
/*height: 200px;*/
margin: 0 auto;
margin-top: 400px;
}
</style>
</head>
<body>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</body>
<script>
$(document).ready(function() {
//显示2行
$clamp($("p")[0], {
clamp: '4',
// useNativeClamp: false,
// truncationChar: '。。。',
// truncationHTML: '... see more'
});
//根据高度自适应
// $clamp($("p")[0], {
// clamp: 'auto'
// });
})
</script>
</html>
效果：
参考：
https://css-tricks.com/line-clampin/
https://github.com/josephschmitt/Clamp.js
407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
