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.

— isherwood
source

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
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

57

Vous pouvez utiliser CSS white-space Propertypour y parvenir.

white-space: nowrap

— Robert C. Barth
source

36

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

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

— Vivek
source

4

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

— grossvogel
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
source