内联时对齐 <span> 中的文本

Question

我需要在一个 span-tag 中对齐一些文本，然后在该文本后的另一个 span-tag 中添加“...”。 “...”应该紧跟在最后一个字母之后，而不是在下一行，即它应该是内联的——这似乎不适用于合理的文本！我不能使用像 jQuery 的 .append() 之类的东西，我正在寻找一个纯粹的 CSS + HTML 解决方案。

#container {
  width: 40%;
  margin-left: 25%;
  padding: 5%;
}

#container span {
  text-align: justify;
  display: inline-block;
}

<div id="container">
  <span>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. </span>
  <span>...</span>
</div>

Answer 1

您可以使用以下使用 :after 伪元素的解决方案：

#container {
  margin-left:25%;
  padding:5%;
  width:40%;
}
#container span {
  display:inline-block;
  text-align:justify;
}
#container span::after {
  content:'...';
}

<div id="container">
    <span>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.</span>
</div>

内联时对齐 <span> 中的文本

Justify text in <span> while inline

html

css

inline

justify