Comment empêcher le texte de prendre plus d'une ligne?

332

Y a-t-il un retour à la ligne ou tout autre attribut qui empêche le texte de s'habiller? J'ai une hauteur, et overflow:hidden, et le texte se casse toujours.

Doit fonctionner dans tous les navigateurs, avant CSS3.

html css text word-wrap isherwood
la source

Réponses:

632 

div {
  white-space: nowrap;
  overflow: hidden;
}
<div>test that doesn't wrap</div>
Développer l'extrait

Remarque: cela ne fonctionne que sur les éléments de bloc. Si vous devez effectuer cette opération sur des cellules de tableau (par exemple), vous devez placer un div à l'intérieur de la cellule de tableau car les cellules de tableau ont une cellule de tableau d'affichage non bloquée.

Depuis CSS3, cela est également pris en charge pour les cellules de tableau.

cletus
la source
12
espace blanc! C'est ce que je cherchais ... 1000 merci ... c'est impossible à google!
2
Il y a aussi un attribut propriétaire c'est-à-dire appelé word-wrap (IIRC) ... stupide IE.
garrow
21
Pensez également à "text-overflow: ellipsis;" Il ajoute le ... à la fin de votre texte s'il dépasse les limites de la largeur de votre conteneur
Drew Landgrave
1
Je pense que le commentaire "cela ne fonctionne que sur les éléments de bloc" est juste. Si vous essayez ceci dans une ancre, un paragraphe, un titre, etc., cela ne fonctionne pas. Vous devez faire quelque chose commep.oneline { white-space:nowrap; overflow:hidden; display:block;}
Alex Angelico
Méfiez-vous de cacher le débordement; cela signifie des affaires.
David A. Gray
36

L'utilisation d'ellipses ajoutera le ... au dernier.

   <style type="text/css">
    div {
      white-space: nowrap;
      overflow: hidden;
text-overflow: ellipsis;
    }
    </style>
Vivek
la source
4

Parfois, l'utilisation &nbsp;au lieu d'espaces fonctionnera. De toute évidence, il présente cependant des inconvénients.

grossvogel
la source
Malheureusement, je ne peux pas le faire dans cette circonstance
2

Juste pour être clair, cela fonctionne bien avec les paragraphes et les en-têtes, etc. Il vous suffit de spécifier display: block.

Par exemple:

<h5 style="display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden">
  This is a really long title, but it won't exceed the parent width
</h5>

(pardonnez les styles en ligne)

Duncan Jones
la source