内联时在中对齐文本

Melvin 发表于 Dev

梅尔文

我需要在一个跨度标签中对齐一些文本，然后在该文本后的其他跨度标签中添加“ ...”。“ ...”应该紧接在最后一个字母之后，而不是在下一行，即应该是内联的-似乎不适用于对齐的文本！而且我不能使用类似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>

塞巴斯蒂安·布罗施（Sebastian Brosch）

您可以使用以下使用: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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。