javascript实现段落的收缩与展开

最新推荐文章于 2023-01-11 19:43:04 发布

暮　色

最新推荐文章于 2023-01-11 19:43:04 发布

阅读量646

点赞数 2

分类专栏：前端 JavaScript 文章标签：前端 JavaScript

本文链接：https://blog.csdn.net/infotw/article/details/93775855

版权

本文介绍如何利用JavaScript结合-webkit-line-clamp属性实现段落内容的收缩和展开效果。通过计算文字显示的高度和限制行数比较，来控制内容的显示状态。

摘要由CSDN通过智能技术生成

主要是使用-webkit-line-clamp这个属性进行限制显示行数,通过计算文字在标签内的显示高度来计算当前文字行数,再与需要限制的行数进行对比,来确定是否显示

代码如下:

<!--Created by lmj on 2017/8/10.-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>段落的收起与展开</title>
<script src="js/jquery.js"></script>
<style type="text/css">
.info-shrink-text {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
#info-manager-content {
text-indent: 2em;
font-size: 12px;
color: #404040;
font-family: 微软雅黑;
}
.more-text {
display: -webkit-box;
width: 100%;
-webkit-box-sizing: border-box;
-webkit-box-pack: end;
padding-right: 10px;
color: #00a5e0;
font-size: 14px;
}
</style>
</head>
<body>
<div class="ui-tab">
<P id="info-manager-cont