Based on JavaScript to achieve text beyond the part of hiding
- 2021-01-11 01:52:17
- OfStack
This article gives you to share text beyond the hidden part of the function, the code is relatively simple, interested friends can refer to the next section of code.
The specific code is as follows:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> Hide text beyond limit </title>
<style>
.text {
width: 800px;
height: 48px;
line-height: 24px;
color: #333;
background: #ccc;
border: #eaeaea 1px solid;
margin: 40px auto;
}
.text1{
width: 500px;
height: 72px;
}
</style>
</head>
<body>
<div class="text"> Before the Academy Awards, DiCaprio won this year's BAFTA ( BAFTA ) Best Actor Award. The awards are considered a prelude to the Academy Awards. Even though he had 3 Nominated for the first time, the fans are also 1 But DiCaprio has yet to win an Oscar. </div>
<div class="text text1"> Before the Academy Awards, DiCaprio won this year's BAFTA ( BAFTA ) Best Actor Award. The awards are considered a prelude to the Academy Awards. Even though he had 3 Nominated for the first time, the fans are also 1 But DiCaprio has yet to win an Oscar. But Mr. DiCaprio has yet to win an Oscar. But Mr. DiCaprio has yet to win an Oscar. </div>
<script>
// According to the class Name acquisition element , In this case, we're going to use class Get the element name , To be able to control multiple elements ( text,text1 ) String degree of .
function getByClass(oParent, sClass) {
if (oParent.getElementsByClassName) {
return oParent.getElementsByClassName(sClass);
} else { //IE 8 7 6
var arr = [];
var reg = new RegExp('\\b' + sClass + '\\b');
var aEle = oParent.getElementsByTagName('*');
for (var i = 0; i < aEle.length; i++) {
if (reg.test(aEle[i].className)) {
arr.push(aEle[i]);
}
}
return arr;
}
}
function testAuto() {
var textName = getByClass(document, 'text');
for (var i = 0; i < textName.length; i++) {
var nowLeng = textName[i].innerHTML.length;
if ( nowLeng > 85 ) {
var nowWord = textName[i].innerHTML.substr(0, 85) + ' 6. ';
textName[i].innerHTML = nowWord;
}
}
}
testAuto();
</script>
</body>
</html>The above code simple text beyond the hidden part of the function, I hope you like.