javascript - 在文本溢出时生成省略号

Question

我一直在寻找一种在超过一定行数时在文本中添加省略号的方法。我不想使用插件，我从另一个答案中找到了一个纯 JS 代码。但是，省略号“...”应用于每个元素，即使它没有超过数字限制。

HTML:

<p class="product-title">This is my product title example</p>

CSS:

.product-title {
    line-height: 1.4rem;
    height: 2.8rem;
}

!!我添加了 line-height 两倍的高度以使文本超过两行溢出。如果我想要三行，我将行高设置为三倍。

JS:

function dotify(element) {
    var limit = element.offsetTop + element.offsetHeight;
    var dots = document.createElement('span');
    if (element['data-inner'])
        element.innerHTML = element['data-inner'];
    else
        element['data-inner'] = element.innerHTML;
    dots.appendChild(document.createTextNode('...'));
    element.style.overflow = 'hidden';
    element.appendChild(dots);
    while (dots.offsetTop + dots.offsetHeight > limit) {
        dots.previousSibling.data = dots.previousSibling.data
            .replace(/\W*\w+\W*$/, '')
    }
}


jQuery(".product-title").each(function() {
    dotify(this);
});

编辑之前和之后的例子:

之前:Lorem ipsum dolor sit amet, consectetur adipiscing 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.

之后:Lorem ipsum dolor sit amet, consectetur adipiscing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

Answer 1

我想你可以在应用之前检查内容的高度

function dotify(element) {
  if (element.clientHeight >= element.scrollHeight) {
    return
  }
  var limit = element.offsetTop + element.offsetHeight;
  var dots = document.createElement('span');
  if (element['data-inner']) {
    element.innerHTML = element['data-inner'];
  } else {
    element['data-inner'] = element.innerHTML;
  }
  dots.appendChild(document.createTextNode('...'));
  element.style.overflow = 'hidden';
  element.appendChild(dots);
  while (dots.offsetTop + dots.offsetHeight > limit) {
    dots.previousSibling.data = dots.previousSibling.data.replace(/\W*\w+\W*$/, '')
  }
}


jQuery(".product-title").each(function() {
  dotify(this);
});

.product-title {
  line-height: 1.4rem;
  height: 2.9rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="x1" class="product-title">This is my product title example</p>
<p id="x2" class="product-title">This is my product title example This is my product title example This is my product title example This is my product title example</p>
<p id="x3" class="product-title">This is my product title example This is my product title example This is my product title example This is my product title example This is my product title example</p>
<p id="x4" class="product-title">This is my product title example This is my product title example This is my product title example This is my product title example This is my product title example This is my product title example This is my product title example This is my product title example</p>