从开头截断文本并在多行段落上添加椭圆

Question

我正在尝试在网页上显示一个段落，该段落将根据用户操作进行更新（段落内容会发生变化）我需要将内容限制为 n 行。以及如果用户尝试向该段落添加任何内容。它应该添加并用椭圆截断开头以指示。

最大行 2 的示例 - Line number 1, Line2 再添加一行 (line3) 后，它应该是 - ...Line2. Line3。 尝试了以下方法

p {
display: -webkit-box;
max-width: 200px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;}

无法将椭圆定位在文本的开头，也无法找到从开头截断的方法。它被限制为 4 行

    .ellipsis {
    overflow: hidden;
    width: 60px;
    position: relative
    direction: rtl; 
    margin-left: 15px;
    white-space: nowrap;
}   
.ellipsis:after {
    position: absolute;
    left: 0px;
    content: "...";
}

因为我使用的是 multiline ，所以不能使用 nowrap。 stackoverflow 中有不同的问题。但这似乎是不同的要求。

参考问题-I need an overflow to truncate from the left, with ellipses

Text-overflow ellipsis on left side

Applying an ellipsis to multiline text

Answer 1

我会从这样的事情开始。

function fit(el, text) {
  const outer = el.parentElement;
  const words = text.split(' ');
  let chop = 0;
  do {
    el.innerText = chop ? `… ${words.slice(chop).join(' ')}` : text;
  } while (outer.scrollHeight > outer.clientHeight && ++chop < words.length);
}

const resizeObserver = new ResizeObserver(() => {
  fit(document.getElementById('target'),
      'A few lines of text will overflow and run over, and the beginning will get chopped off.');  
});

resizeObserver.observe(document.getElementById('outer'));

#outer {
  width: 150px;
  height: 80px;
  overflow: hidden;
}

<div id="outer"><p id="target"></p></div>