CODEWITHSUNDEEP
javascripthtmlcss
Satish
Satish

Reputation: 25

Multiple Line ellipses with class

I found this code to make multiple line ellipsis,

first I added this code for only one div it was working now but this is not work with many 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>

I don't know what is the problem in my code?Please help.

Upvotes: 0

Views: 105

Answers (2)

Nope
Nope

Reputation: 22329

You are using id=overflowDiv on all div elements, which is not valid. In addition getElementById only returns the first match and not all divs.

Using your existing code, use class instead of id and in addition use use getElementsByClassName to return all matched elements.

Then you can iterate through all elements and apply your logic to each one.

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

Upvotes: 2

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

You can't use same ID for multiple elements, use class instead. and select element by getElementsByClassName selector, and class name will return elements in array format, use your code in loop.

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>

Upvotes: 3

Related Questions