javascript - 如何使椭圆垂直对齐？

Question

我有几行文本，每一行都被省略号 chop 。

.container {
   display: block;
   border: 1px solid;
   width: 200px;
}

.text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 20px;
  text-align: justify;
}

<div class="container">
  <p class="text">
    This is text1 that has very very very long string.
  </p>
  
  <p class="text">
    The ellipses of the line is not vertically aligened with the above one.
  </p>
  
  <p class="text">
    This is text3 that has very very very long string.
  </p>
  
  <p class="text">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </p>
</div>

正如您从演示中看到的，即使元素宽度都相同，所有椭圆也没有垂直对齐。
如何使所有这些垂直对齐？
附言附截图

Answer 1

text-align 属性仅用于子元素的长度小于父元素(或包含元素)的宽度的情况。如果子元素的长度比其父元素/包含元素宽，则不使用 text-align 属性。我明白你想用 text-align: justify 做什么，但在这种情况下它不起作用，因为段落元素长度实际上超过了你为容器元素设置的 200px。
因此，为了垂直对齐它们，您只需要设置一个宽度并将其添加到 .text 类中。
添加width: 180px到您的 .text 类应该可以为段落元素设置宽度，这将使它更接近。
但是，您仍然会遇到奇怪的情况，它们在不同的字符处被切断，并且它们不会像您预期的那样完全对齐，因此您可以执行以下操作，这有点棘手，因为您必须向其中添加包装器每个段落元素。它可能看起来有点笨拙，但这就是你的做法:

.container {
       display: block;
       border: 1px solid;
       width: 200px;
    }

    .text{
        text-overflow: clip;
        font-size: 20px;
        height: 20px;
        width: 170px;
        overflow: hidden;
        word-break: break-all;
    }

    .ellipsis{
        position: relative;
    }

    .ellipsis::after {
        content: "...";
        position: absolute;
        left: 170px;
        top:0;
        font-size: 20px;
    }
    .ellipsis:first-of-type::after {
        top: 20px;
    }

<div class="container">
  <span class="ellipsis"><p class="text">
    This is text1 that has very very very long string.
      </p></span>
  
 <span class="ellipsis"><p class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p></span>
    
    <span class="ellipsis"><p class="text">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p></span>
    
    <span class="ellipsis"><p class="text">
    This is text1 that has very very very long string.
      </p></span>
</div>

由你决定你使用的是哪一个:)