web-dev-qa-db-fra.com

CSS: comment empêcher un texte de prendre plus d'une ligne?

Existe-t-il un retour à la ligne ou un autre attribut empêchant le texte de se retourner? J'ai une hauteur, et overflow:hidden, et le texte se casse toujours.

Doit fonctionner dans tous les navigateurs, avant CSS3.

csstextwrap
270
Franky

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

Remarque: cela ne fonctionne que sur les éléments de bloc. Si vous avez besoin de le faire pour les cellules de tableau (par exemple), vous devez insérer un div à l'intérieur de la cellule de tableau, car les cellules de tableau ont un affichage table-cellule non bloquant.

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

542
cletus

Vous pouvez utiliser CSS white-space Property pour y parvenir.

white-space: nowrap
46
Robert C. Barth

Utiliser Ellipsis ajoutera le ... au dernier.

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

Parfois, utiliser &nbsp; au lieu d'espaces fonctionnera. Clairement, cela a des inconvénients, cependant.

4
grossvogel

Pour que tout soit clair, cela fonctionne bien avec les paragraphes, 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)

0
Duncan Jones