JS-使用clamp.js-限制文本显示行数

- 日理万妓 2022-04-01 06:24 476阅读 0赞

使用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>

效果：  
![在这里插入图片描述][20181229154644932.jpg]

参考：

> [https://css-tricks.com/line-clampin/][https_css-tricks.com_line-clampin]  
> [https://github.com/josephschmitt/Clamp.js][https_github.com_josephschmitt_Clamp.js]

[20181229154644932.jpg]: /images/20220401/c860e820fec84ccaacbf96f3c7ef3eb3.png
[https_css-tricks.com_line-clampin]: https://css-tricks.com/line-clampin/
[https_github.com_josephschmitt_Clamp.js]: https://github.com/josephschmitt/Clamp.js

发表评论取消回复

表情：

评论列表（有 0 条评论，476人围观）

还没有评论，来说两句吧...

相关阅读

相关 js文本内容显示6行，超出6行出现显示更多按钮，css样式超出行数只能使用...去替代

js处理文本内容显示6行，超出6行出现显示更多按钮，对于网上说的css样式处理，基本上都是超出6行使用…去处理，不符合需求，先看结果，再看需求：如下先看实现结果，如下图所示

深藏阁楼爱情的钟/ 2023年02月19日 09:30/ 0 赞/ 7 阅读

相关异常栈 - 限制打印行数

我们经常通过 try catch 代码块包住一段可能出现异常的代码，同时在 catch 块中打印异常信息，如下所示： public static void main(

Love The Way You Lie/ 2022年12月13日 09:57/ 0 赞/ 226 阅读

相关 css之限制文本行数，超出部分显示 “...“

![实例!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20200831165220554.png\pic\_center)!\[在这里插

淡淡的烟草味﹌/ 2022年12月03日 01:37/ 0 赞/ 228 阅读

相关限制文本行数，超出...

如图：超出限制行数显示… ![在这里插入图片描述][2021020211141871.png] 可以用css实现 > 单行文本 .text {

桃扇骨/ 2022年10月26日 12:58/ 0 赞/ 201 阅读

相关 eclipse控制台不限制显示的行数

转载：[https://www.cnblogs.com/taiguyiba/p/6928586.html][https_www.cnblogs.com_taiguyiba_p_

曾经终败给现在/ 2022年10月18日 12:57/ 0 赞/ 192 阅读

相关 idea控制台取消行数限制

intellij idea控制台取消行数限制在idea7之后的版本中取消了控制台行数设置选项，只能通过更改配置文件进行更改在%安装目录%/bin中找到idea.pr

ゝ一世哀愁。/ 2022年06月10日 03:49/ 0 赞/ 361 阅读

相关 html限制文字显示行数

显示容器显示文本行数，并将超出部分用...代替 overflow : hidden; text-overflow: ellipsis;

╰半橙微兮°/ 2022年05月17日 11:26/ 0 赞/ 1155 阅读

相关文本超出两行显示省略号插件Clamp.js

overflow:hidden; text-overflow:ellipsis; display:-webkit-box; \-webkit-box-orient:v

系统管理员/ 2022年05月17日 10:38/ 0 赞/ 269 阅读

相关 JS-使用clamp.js-限制文本显示行数

使用clamp.js限制文本显示行数 <!DOCTYPE html> <html> <head> <meta charset=

- 日理万妓/ 2022年04月01日 06:24/ 0 赞/ 477 阅读

相关纯CSS显示JS/HTML等源代码行数

纯CSS显示JS/HTML等源代码行数

忘是亡心i/ 2021年06月26日 16:06/ 0 赞/ 399 阅读