The main purpose is to use the -webkit-line-clamp attribute to limit the number of displayed lines. By calculating the display height of the text in the label, the current number of lines is calculated, and then compared with the number of lines that need to be limited to determine whether to display.
The code is as follows:
<!--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>Close and expand the paragraph</title>
<script src="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: Microsoft Yahei;
}
.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 class="info-shrink-text">
Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.
Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.
Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.
Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.
Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.
Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.
Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.Expand and close the test paragraph.
Expand and close the test paragraph.Test paragraph</P>
<div class="more-text">See more</div>
</div>
<script type="text/javascript">
var isHide = true;
var textContainer;
function initView() {
textContainer = $("#info-manager-content");
var single=("div");
// Set text style = "padding:0;visibility:hidden;font-family:Microsoft Yahei;font-size:12px";
= "one";
(single);
//Get the height of a single text in this stylevar singleHeight = ;
(single);
//Get the height of the entire paragraphvar paragraphHeight = ();
//Set the height you want to limitvar limitHeight = 50;
//The current number of text linesvar currentLine = (paragraphHeight/singleHeight).toFixed(0);
//Convert to row countvar lineCount = (limitHeight / singleHeight).toFixed(0);
// alert(singleHeight+"----"+paragraphHeight+"---"+lineCount+"---"+currentLine);
// Modify paragraph limit number of rows("style", "-webkit-line-clamp:" + lineCount);
// Set the display or hide buttonsif (currentLine >= lineCount) {
$(".more-text").show();
isHide = true;
} else {
$(".more-text").hide();
}
}
initView();
= function () {
initView();
};
//Add a click event$(".more-text").on("click", function () {
if (isHide) {
("info-shrink-text");
$(this).text("Collapse");
isHide = false;
} else {
("info-shrink-text");
$(this).text("See More");
isHide = true;
}
});
</script>
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.