web-dev-qa-db-fra.com

Éviter les sauts de ligne entre les éléments HTML

J'ai cet élément <td>:

<td><i class="flag-bfh-ES"></i>&nbsp;+34&nbsp;666&nbsp;66&nbsp;66&nbsp;66</td>

J'espérais garder cela dans une seule ligne, mais voici ce que je reçois:

enter image description here

Comme vous pouvez le constater, le drapeau et le numéro de téléphone sont séparés. Les &nbsp; travaillent entre les numéros du numéro de téléphone, mais pas entre le drapeau et le numéro de téléphone.

Comment puis-je m'assurer que le moteur de rendu n'introduit aucune saut de ligne?

htmlwhitespace
87
dangonfast

Il existe plusieurs moyens d'éviter les sauts de ligne dans le contenu. Utiliser &nbsp; est un moyen, qui fonctionne bien entre les mots, mais son utilisation entre un élément vide et du texte n’a pas d’effet bien défini. La même chose s’appliquerait à l’approche plus logique et plus accessible, qui consiste à utiliser une image pour une icône.

L'alternative la plus robuste consiste à utiliser le balisage nobr, non standard mais universellement pris en charge, qui fonctionne même lorsque CSS est désactivé:

<td><nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</nobr></td>

(Vous pouvez, mais ne devez pas, utiliser &nbsp; au lieu d'espaces dans ce cas.)

Une autre manière est l'attribut nowrap (obsolète/obsolète, mais fonctionne toujours bien, sauf quelques rares bizarreries):

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

Ensuite, il y a la méthode CSS, qui fonctionne dans les navigateurs compatibles CSS et nécessite un peu plus de code:

<style>
.nobr { white-space: nowrap }
</style>
...
<td class=nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>
123
Jukka K. Korpela

CSS pour ce td: white-space: nowrap; devrait le résoudre.

50
tcak

Si vous en avez besoin pour plusieurs mots ou éléments, mais que vous ne pouvez pas l'appliquer à un entier TD ou similaire, la balise Span peut être utilisée.

<span style="white-space: nowrap">Text to break together</span>
    or 
<span class=nobr>Text to break together</span>

Si vous utilisez la version de la classe, pensez à configurer le CSS comme indiqué dans la réponse acceptée.

3
Greg Little

Si la balise <i> ne s'affiche pas en tant que bloc et cause le problème, cela devrait fonctionner:

<td style="white-space:nowrap;"><i class="flag-bfh-ES"></i>&nbsp;+34&nbsp;666&nbsp;66&nbsp;66&nbsp;66</td>

2
ameagher

C'est la vraie solution:

<td>
  <span class="inline-flag">
    <i class="flag-bfh-ES"></i> 
    <span>+34 666 66 66 66</span>
  </span>
</td>

css:

.inline-flag {
   position: relative;
   display: inline;
   line-height: 14px; /* play with this */
}

.inline-flag > i {
   position: absolute;
   display: block;
   top: -1px; /* play with this */
}

.inline-flag > span {
   margin-left: 18px; /* play with this */
}

Exemple, des images qui toujours avant le texte:

enter image description here

1
Andrey Izman

Dans certains cas (par exemple, HTML généré et inséré par JavaScript), vous pouvez également essayer d’insérer un menuisier de largeur zéro:

.wrapper{
  width: 290px;   
  white-space: no-wrap;
  resize:both;
  overflow:auto; 
  border: 1px solid gray;
}

.breakable-text{
  display: inline;
  white-space: no-wrap;
}

.no-break-before {
  padding-left: 10px;
}
<div class="wrapper">
<span class="breakable-text">Lorem dorem tralalalala LAST_WORDS</span>&#8205;<span class="no-break-before">TOGETHER</span>
</div>
1
hugo der hungrige

nobr est trop peu fiable, utilisez des tables

<table>
      <tr>
          <td> something </td>
          <td> something </td>
      </tr>
</table>

Tout va dans le même sens, tout est à égalité, et vous avez beaucoup plus de liberté si vous voulez changer quelque chose plus tard.

0
Erik Österling