Обоснуйте текст в <span>, пока он встроен

Мне нужно выровнять текст в одном теге span, а затем добавить "..." в другом теге span после этого текста. "..." должно быть сразу после последней буквы, а не на следующей строке, то есть оно должно быть встроено - что, кажется, не работает с выровненным текстом! И я не могу использовать что-либо вроде japuery.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 ответ

Решение

Вы можете использовать следующее решение, используя :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>

Другие вопросы по тегам