Question

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

HTML：

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

CSS：

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

!!我添加了行高两倍的高度，使文本超过两行溢出。如果我想要三条线，我将线高三倍。

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

labis 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

我认为您可以在应用

之前检查内容的高度

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

生成文本溢出的省略号

1 个答案: