Question

我试图弄清楚如何使用JavaScript检测换行符（响应）。我想删除第3行和第2行的字符，其中包含一些像这样的点＆＃39; ...＆＃39;。

我知道线高是20px。我知道我通过除以div-height / line-height来检查线条的数量。我不知道如何在第3行开始之前获取文本。

尝试了无用的溢出和椭圆部分＆＃39; MJ：

仅适用于他给出的文字..而不是我自己的文字。

更新＃2：

尝试了马蒂亚斯的解决方案，但在使其响应时遇到了问题。我尝试在resize事件上添加一个窗口，并在全文中添加一个额外的div。

function ellipsizeTextBox(id) {
   var el = document.getElementById(id);
   var fullTextEl = $(el).parent().find('.MB-Item-Description-Full').text();
   var wordArray = fullTextEl.split(' ');
   while(el.scrollHeight > el.offsetHeight){
     wordArray.pop();
    el.innerHTML = wordArray.join(' ') + '...';
   }
}

window.onresize = function(event){
  $( ".MB-Item-Description" ).each(function( index ) {
    var id = $(this).attr('id');
    ellipsizeTextBox(id);
  });
}

在使浏览器变小时效果很好，在浏览器变大时不会添加更多单词。

Answer 1

我建议使用overflow：hidden和text-overflow：省略号不起作用，因为多行文本没有省略号。今天学到了，所以你的问题也在某种程度上帮助了我:-D

好奇如何解决这个问题，我在this page上找到了一个小小的JS解决方案，这个解决方案在我的下面很有用：

＆＃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('truncate');

＆＃13;

.text {
  line-height: 20px;
  max-height: 40px;
  width: 200px;
  border: 1px solid #ddd;
  margin: 10px;
  overflow: hidden;
}

＆＃13;

<div class="text">
  Lorem ipsum
</div>

<div class="text" id="truncate">
  Het geheime dagboek van Hendrik Groen, Nederlands kampionen van de Schrijvers Competitie 1984.
</div>

＆＃13;

所以，不需要插件或其他东西，只需几行JS。我希望它有所帮助：）

编辑：添加了屏幕截图中的文字

Answer 2

您是否尝试使用仅限线路钳的css解决方案？

.break-this {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

<div class="break-this">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi condimentum urna a purus vehicula, et sodales ante cursus. Etiam eu neque lorem. Fusce at libero arcu. Proin commodo porta ex. Vestibulum mollis pretium iaculis. Vestibulum mollis, ipsum vitae lacinia pretium, justo elit elementum tellus, vel pellentesque massa ex sit amet nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam ultricies ante mauris, at vestibulum ipsum maximus a. Nullam at vestibulum justo, vitae cursus nibh. Sed finibus ipsum in lobortis placerat.

Cras sed nibh sit amet nisi malesuada interdum feugiat vehicula turpis. Vivamus scelerisque ex risus, non auctor sem feugiat vel. Aenean in fermentum nunc. Aenean a tellus leo. Cras id bibendum ex. In maximus turpis in urna eleifend, sed lobortis libero dictum. Proin cursus rhoncus dolor et convallis. Integer facilisis, dui ac iaculis ultrices, tellus turpis accumsan sem, vel mollis diam nibh sit amet arcu. Nunc vulputate vel urna eu dignissim. Cras non turpis iaculis, porttitor nibh sit amet, hendrerit felis. Etiam id arcu venenatis, dictum enim a, facilisis magna. Aenean euismod viverra dui, a ultricies nunc fermentum eu. Aliquam erat volutpat.</div>

检测换行javascript

2 个答案: