HTML+CSS : Comment forcer le contenu des div à rester sur une seule ligne ?

Question

J'ai un long texte à l'intérieur d'un div avec défini width :

HTML :

<div>Stack Overflow is the BEST !!!</div>

CSS :

div {
    border: 1px solid black;
    width: 70px;
}

Comment puis-je forcer la chaîne à rester sur une seule ligne (c'est-à-dire à être coupée au milieu de "Overflow") ?

J'ai essayé d'utiliser overflow: hidden mais ça n'a pas aidé.

Answer 1

Essayez ça :

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

Answer 2

Utilisez white-space:nowrap et overflow:hidden

http://jsfiddle.net/NXchy/8/

Answer 3

Dans votre css, utilisez white-space:nowrap;

Answer 4

Tout le monde a sauté sur l'occasion ! !! Moi aussi j'ai fait un violon :

http://jsfiddle.net/audetwebdesign/kh4aR/

RobAgar gagne un point pour avoir souligné white-space:nowrap d'abord.

Deux choses ici, vous avez besoin overflow: hidden si vous ne voulez pas voir les caractères supplémentaires empiéter sur votre mise en page.

Aussi, comme mentionné, vous pourriez utiliser white-space: pre (voir EnderMB) en gardant à l'esprit que pre ne réduira pas les espaces blancs alors que white-space: nowrap volonté.

Answer 5

Ajoutez ceci à votre div

white-space: nowrap;

http://jsfiddle.net/NXchy/1/