如何将3个点放在CSS中多行文本第3行的最后一个单词中

Question

我有以下css代码：

.description-text {
overflow: hidden;
position: relative;
line-height: 1.375em;
max-height: 4.125em;
/* margin-right: -1em;
padding-right: 1em; */
font-size: 16px;
margin-bottom: 0px;
color: #7a7a7a;
&:before {
content: '...';
position: absolute;
right: 4.125em;
bottom: 0;
}
&:after {
content: '...';
position: absolute;
//right: 0;
height: 3rem;
margin-top: 0.2rem;
}

我的html元素：

<p class="description-text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>

我试图只显示上面文本的3行，并在最后一个字符的末尾添加3个点。我做到了。我的问题是，我想把这3个点正好放在文本的末尾。

有什么建议吗？我不想通过证明文本对齐来做到这一点。我想要一个适用于用户可以放入<p>元素中的任何类型的文本的解决方案。

Answer 1

你可以用这个CSS来做到这一点。你可以通过缩小浏览器窗口的大小来看到效果。

https://codepen.io/Rishab2019/pen/bGVRxLO

.description-text {
position: relative;
line-height: 1.375em;
max-height: 4.125em;
/* margin-right: -1em;
padding-right: 1em; */
font-size: 16px;
margin-bottom: 0px;
color: #7a7a7a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

}
&:before {
content: '...';
position: absolute;
right: 4.125em;
bottom: 0;
}
&:after {
content: '...';
position: absolute;
//right: 0;
height: 3rem;
margin-top: 0.2rem;
}