Multiple elten Ellipsen mit Klasse

ich diesen Code gefunden mehrzeilige Auslassungs zu machen,Multiple elten Ellipsen mit Klasse

erste habe ich diesen Code nur für eine div jetzt war es funktioniert, aber dies funktioniert nicht mit vielen divs

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>

Ich weiß nicht, was ist das Problem in meinem Code? Bitte helfen.

Quelle

2017-03-27 Satish

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

Sie verwenden id=overflowDiv auf allen div Elemente, die nicht gültig ist. Außerdem gibt getElementById nur die erste Übereinstimmung und nicht alle Divs zurück.

Verwenden Sie den vorhandenen Code, verwenden Sie class anstelle von id, und verwenden Sie außerdem getElementsByClassName, um alle übereinstimmenden Elemente zurückzugeben.

Dann können Sie alle Elemente durchlaufen und Ihre Logik auf jede anwenden.

<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>

Quelle

2017-03-27 12:59:37 Nope

Gibt es eine Notwendigkeit/hinzufügen verwenden 'jquery' in obigem Code ? –

Nicht, es sei denn, Ihre Anwendung verwendet es bereits oder Sie haben Probleme mit verschiedenen Browsern. Überprüfen Sie 'getElementsByClassName' [** Browser-Kompatibilität **] (https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName#Browser_compatibility) für Details – Nope

Danke für Ihre Hilfe – Satish

Sie können nicht die gleiche ID für mehrere Elemente verwenden, sondern stattdessen die Klasse. und wählen Sie Element von getElementsByClassName Selektor, und Klassenname wird Elemente in array Format zurückgeben, verwenden Sie Ihren Code in Schleife.

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>

Quelle

2017-03-27 12:53:43

Multiple elten Ellipsen mit Klasse

Antwort

Verwandte Themen