将字符串中的省略号与行限制居中对齐

Question

如果字符串长于 2 行，我尝试将省略号对齐到字符串的中心（中间截断）。现在我在末尾有省略号，就像这样

this is a test string that could be longer than 2 lines...

。我想要完成的是这样的事情

this is a test string that ... could be longer than 2 lines

。我已经看到你可以在哪里根据字符长度来做到这一点，但这使得所有断点都很难到达移动设备。

这就是我目前完成将省略号添加到字符串末尾并将其限制为 2 行的方法

#limitTwoLines {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

Answer 1

此 HTML 代码将创建一个 ID 为 limitTwoLines 的 div 元素。 div 元素将具有类省略号。这将导致页面加载时调用 JavaScript 函数 centerEllipsis()。该函数将计算字符串的中心并在那里添加省略号。

    function centerEllipsis(element) {
      var text = element.textContent;
      var width = element.clientWidth;
      var center = width / 2;
      var ellipsis = "...";
      var ellipsisWidth = ellipsis.length * document.defaultView.getComputedStyle(element, null).getPropertyValue("font-size");
      var start = center - ellipsisWidth / 2;
      element.innerHTML = text.slice(0, start) + ellipsis + text.slice(start + ellipsis.length);
    }

    document.addEventListener("DOMContentLoaded", function() {
      var elements = document.querySelectorAll(".ellipsis");
      for (var i = 0; i < elements.length; i++) {
        centerEllipsis(elements[i]);
      }
    });

    #limitTwoLines {
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .ellipsis {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      margin: 0 auto;
    }

  <div id="limitTwoLines" class="ellipsis">
    This is a test string that could be longer than 2 lines...
  </div>