多行带班

我发现这个代码，以使多行省略号省略号，多行带班

首先我加入这个代码只有一个DIV现在是工作，但是这是不是与许多div的工作

function ellipsizeTextBox(id) { 
 
    var el = document.getElementById(id); 
 
    var wordArray = el.innerHTML.split(' '); 
 
    while (el.scrollHeight > el.offsetHeight) { 
 
    wordArray.pop(); 
 
    el.innerHTML = wordArray.join(' ') + '...'; 
 
    } 
 
} 
 
ellipsizeTextBox('overflowedDiv');

.overflowedDiv { 
 
    height: 60px; 
 
    width: 400px; 
 
    display: inline-block; 
 
    vertical-align: top 
 
}

<div id="overflowedDiv"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div> 
 

 
<div id="overflowedDiv"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div>

我不知道我的代码中存在什么问题？请帮忙。

来源

2017-03-27 Satish

https://www.w3.org/TR/html5/dom.html#the-id-attribute – Marie

您对所有div元素，这是无效的使用id=overflowDiv。此外getElementById只返回第一个匹配，而不是所有div。

使用您现有的代码，请使用class而不是id，并使用getElementsByClassName返回所有匹配的元素。

然后，您可以遍历所有元素并将逻辑应用到每个元素。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <style> 
 
    .overflowedDiv { 
 
     height: 60px; 
 
     width: 400px; 
 
     display: inline-block; 
 
     vertical-align: top 
 
    } 
 
    </style> 
 
    <title>Document</title> 
 
</head> 
 

 
<body> 
 

 

 

 

 

 
    <div class="overflowedDiv"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 

 
    <div class="overflowedDiv"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 

 
    <script> 
 
    function ellipsizeTextBox(className) { 
 
     var wordArray; 
 
     var el; 
 
     var els = document.getElementsByClassName(className); 
 
     for (i = 0; i < els.length; i++) { 
 
     el = els[i]; 
 
     wordArray = el.innerHTML.split(' '); 
 
     while (el.scrollHeight > el.offsetHeight) { 
 
      wordArray.pop(); 
 
      el.innerHTML = wordArray.join(' ') + '...'; 
 
     } 
 
     } 
 
    } 
 
    ellipsizeTextBox('overflowedDiv'); 
 
    </script> 
 

 

 

 
</body> 
 

 
</html>

来源

2017-03-27 12:59:37 Nope

是否有任何需要添加/用'jquery'在上面的代码？ –

除非您的应用程序已在使用它，否则您在不同浏览器中遇到问题。请查看getElementsByClassName [**浏览器兼容性**]（https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName#Browser_compatibility） – Nope

谢谢您的帮助 – Satish

您不能对多个元素使用相同的ID，请改为使用class。并通过getElementsByClassName选择元素选择器，类名将返回array格式的元素，循环使用你的代码。

var _getElements = document.getElementsByClassName('overflowedDiv'); 
 
var i = 0; 
 
for (i; i < _getElements.length; i++) { 
 
    var el = _getElements[i]; 
 
    var wordArray = el.innerHTML.split(' '); 
 
    while (el.scrollHeight > el.offsetHeight) { 
 
    wordArray.pop(); 
 
    el.innerHTML = wordArray.join(' ') + '...'; 
 
    } 
 
}

.overflowedDiv { 
 
    height: 60px; 
 
    width: 400px; 
 
    display: inline-block; 
 
    vertical-align: top 
 
}

<div class=overflowedDiv> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div> 
 

 
<div class=overflowedDiv> 
 
    In reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div> 
 

 
<div class=overflowedDiv> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div>

来源

2017-03-27 12:53:43

回答

相关问题