Espace insécable avec le code de modèle Django et les badges Bootstrap 4 - django, twitter-bootstrap, bootstrap-4

J'essaie de conserver le texte généré avec le langage de modèle Django qui est contenu dans un badge Bootstrap 4 avec du texte supplémentaire qui n'est pas contenu dans le badge.

Voici mon code:

<span>Submitted&nbsp;by:&nbsp;<span class="badge badge-primary">{{
user.username }}</span></span>

Je veux que tous les mots de la phrase «soumis par l'utilisateur» soient toujours sur la même ligne, mais le code ci-dessus n'y parvient pas. Une idée de ce qui ne va pas?

Réponses:

Ajouter la classe text-nowrap à l'extérieur <span> élément et supprimer l'inutile  .

text-nowrap dans Bootstrap 4 empêche le wrapping comme son nom l'indique.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
<div class="row">
<div class="col-4 bg-success">
<span class="text-nowrap">Submitted by: <span class="badge badge-primary">Usernameverylongusernameevenlongerthanthat</span></span>
</div>
</div>
</div>