Обоснуйте текст в <span>, пока он в строке - PullRequest
Новая
       11

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

0 голосов
/ 06 июня 2018

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

0 голосов
/ 06 июня 2018

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