Comment faire en sorte qu'un élément s'affiche immédiatement après le texte mais reste ancré à droite lorsque le texte ne tient pas en place

Question

Voici une image de ce que je veux réaliser à l'aide de CSS :

Le défi consiste à afficher l'élément "end" juste après le texte lorsque celui-ci s'adapte, mais à s'assurer qu'il reste ancré à droite lorsque le texte ne s'adapte pas.

Voici le HTML :

<p>
This is a short text <span>end</span>
</p>

<p>
This is a very long text, very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long <span>end</span>
</p>

Fiddle here avec une certaine CSS (ne fonctionne pas dans le cas 2). En gros, soit je réussis à faire fonctionner 1 OU 2 (en utilisant float: right sur l'élément "end"), mais pas les deux en même temps.

Quelques contraintes :

• La largeur de la "fin" peut varier (elle peut contenir un texte de longueur variable).
• La solution doit s'adapter aux deux cas
• Le HTML peut être modifié (évitez les tableaux :(
• Je cherche une solution CSS - si c'est impossible, toute solution JS doit être aussi légère que possible.
• Tous les principaux navigateurs sont pris en charge (au moins Firefox, Chrome et Edge les plus récents).

Answer 1

Est-ce que c'est ce que vous recherchez ?

p {
  width: 95vw;
  white-space: nowrap;
  display: flex;
}

.content {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.terminator {
  margin-left: 1%;
}

<p>
  <span class="content">This is a short text </span>
  <span class="terminator">end</span>
</p>

<p>
  <span class="content">
This is a very long text, very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long</span>
  <span class="terminator">end</span>
</p>

<p>
  <span class="content">This is a short text </span>
  <span class="terminator">a bloody hellish end</span>
</p>

<p>
  <span class="content">
This is a very long text, very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long</span>
  <span class="terminator">a bloody hellish end</span>
</p>

Answer 2

Ajoutez du style à l'espace :

position: sticky;
right: 0px;

retirer de p :

text-overflow: ellipsis;

Answer 3

Peut-être que je ne comprends pas exactement ce que vous recherchez (bien que j'aie lu attentivement), mais ceci semble faire l'affaire.

<div>This is very very very very very very very very long text<span>END</span></div>
<div>This is short text<span>END</span></div>

Le span vient juste après le texte qui se trouve dans le div d'habillage. L'affichage est exactement ce que vous avez ci-dessus. Si vous tronquez le texte, c'est la même chose.