代码之家 › 专栏 › 技术社区 › Melvin

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

justify inline css html

Melvin · 技术社区 · 7 年前

我需要在一个跨度标记中调整一些文本,然后在该文本后面的另一个跨度标记中添加“…”。“…”应该在最后一个字母后面,而不是在下一行,也就是说,它应该是内联的-这似乎不适用于对正文本! 我不能使用jquery's.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>

1 回复 | 直到 7 年前

Sebastian Brosch Navjyot 7 年前

您可以使用以下解决方案 :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>