Question

我发现这段代码可以进行多行省略，

首先我只为现在正在使用的一个div添加了此代码，但这不适用于许多div

＆＃13;

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');

＆＃13;

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

＆＃13;

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

＆＃13;

我不知道代码中的问题是什么？请帮助。

Answer 1

您不能为多个元素使用相同的ID，而是使用类。并按getElementsByClassName选择器选择元素，类名将返回array格式的元素，循环使用您的代码。

＆＃13;

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(' ') + '...';
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您在所有id=overflowDiv元素上使用div，这些元素无效。另外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>

带有类的多行椭圆

2 个答案: