右对齐文本的省略号

Question

我想对右对齐的文本使用省略号。省略号会在文本保持对齐或单词中间出现中断时出现。

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
}

div {
  width: 200px;
  padding: 1em;
  background-color: pink;
}

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

p.right {
  text-align: right;
}

<div>
  <p class="right">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog</p>
</div>

<div>
  <p class="right">The quick brown fox jumps over the lazy dog. The quickss brown fox jumps over the lazy dog</p>
</div>

<div>
  <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog</p>
</div>

<div>
  <p>The quick brown fox jumps over the lazy dog. The quickss brown fox jumps over the lazy dog</p>
</div>

第一个方框是在一个单词后断开，而第二个方框是在一个单词（quickss）上断开。最后两个框是两个都对齐时。

我需要的解决方案是纯CSS，而不是ClampJS。

谢谢。

-

更新：

下面的图片将更直观地说明问题。除了第二句话中的文本quick之外，下面的两个框具有相同的样式。

第一个框的文本：

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog

第二个框的文本：

The quick brown fox jumps over the lazy dog. The quickss brown fox jumps over the lazy dog

请注意第一个框为什么不显示省略号，因为它在quick之后断开，而第二个框却显示了省略号，因为它在单词quickss中断开。

Answer 1

我的解决方案完全是CSS，目的是在需要时添加省略号（来源：http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/）

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
}

div {
  width: 200px;
  padding: 1em;
  padding-right: 2em; /*1em from normal padding + 1em from '...' width*/
  background-color: pink;
}

/* styles for '...' */ 
.block-with-text {
  /* hide text if it more than N lines  */
  overflow: hidden;
  /* for set '...' in absolute position */
  position: relative; 
  /* use this value to count block height */
  line-height: 1.2em;
  /* max-height = line-height (1.2) * lines max number (2) */
  max-height: 2.4em; 
  /* fix problem when last visible word doesn't adjoin right side  */
  text-align: right;  
  /* place for '...' */
  margin-right: -1em;
  padding-right: 1em;
}
/* create the ... */
.block-with-text:before {
  /* points in the end */
  content: '...';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of block */
  right: 0;
  bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
  /* points in the end */
  content: '';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of text */
  right: 0;
  /* set width and height */
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  /* bg color = bg color under block */
  background: white;
}

<div>

<p class="block-with-text">Here is a paragraph with a lotof text, but onlytwfdo visi ble lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu tellus, ultricies at vestibulum sit amet, malesuada non purus.</p>

</div>