在多行段落中从开头开始截断文本并添加省略号

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: "...";
}

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

参考问题-我需要一个溢出从左边截断，用省略号

左侧文字溢出省略号

将省略号应用于多行文本

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>

Answer 2

CSS选项永远不会像JS那样。不幸的是，没有办法编写条件css。但是使用固定的行高可以管理溢出的文本截断。

• 宽度已知
• 线高已知

下面是一个例子:

:root {
--line-height: 1.2rem;
}
html {
max-width: 20rem;
line-height: var(--line-height);
}
p {
--truncate-after: 4;
max-height: calc(var(--line-height) * var(--truncate-after));
text-align: justify;
position: relative;
overflow: hidden;
padding-right: 1rem;
position: relative;
display: block;
height: fit-content;
text-indent: 1rem;
}
p::after {
content: "...";
display: block;
bottom: 3.83rem;
position: absolute;
height: 1rem;
left: -1rem;
}

<p>
<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In sint facilis explicabo voluptatum exercitationem earum. Quibusdam vitae, iusto temporibus corrupti tempore distinctio soluta reiciendis. Ab aspernatur facilis autem temporibus veniam.</span>
</p>
<p>
<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</span>
</p>
<p>
<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. S'mores are tasty treats for around campfires.</span>
</p>

Answer 3

您可以通过下面的代码片段实现:

• 应用你需要显示的行数的高度
• 隐藏行后。

.start-ellipsis {
height: 55px;
overflow: hidden;
}
.start-ellipsis::before {
content: "...";
display: inline-block;
}

<p class="start-ellipsis">contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>

注意:

• 注意字体大小和字体族，因为它们会影响显示的视觉效果。如。如果你设置了55px的高度来显示3行，然后你改变了字体系列和它的大小，那么你需要相应地改变高度。因此，最佳实践是在确定字体系列、字体大小和行高之后定义高度。
• 这个片段可能会显示/隐藏额外的最后一行，这取决于不同用户的系统字体。