recently, I am doing a requirement. When the text content is more than three lines, it displays "expand" and displays an ellipsis. Click the expand button to switch to put away, but there is a problem, that is, I don"t know how to judge whether the text content is really more than three lines..
<div class="introduction">
<span class="introduction_title"></span>
<pre class="introduction_content" id="introduction_content">{{coachesDetailData.introduction}}changeStyle() {
if (this.show == true) {
this.show = false;
document.getElementsByClassName(
"introduction_content"
)[0].style.cssText =
"display: block;float: left;white-space: pre-line;text-align: left;margin-top: size(10);margin-left: size(15);line-height: size(23);font-size: size(14);letter-spacing: 0;color: -sharp888;";
} else {
this.show = true;
document.getElementsByClassName(
"introduction_content"
)[0].style.cssText =
"display: block;float: left;white-space: pre-line;text-align: left;margin-top: size(10);margin-left: size(15);line-height: size(23);font-size: size(14);letter-spacing: 0;color: -sharp888;display: -webkit-box;overflow: hidden;white-space: normal !important;text-overflow: ellipsis;word-wrap: break-word;-webkit-line-clamp: 3;-webkit-box-orient: vertical;";
}
} 
