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

J'ai un long texte dans un divavec définiwidth :

HTML:

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

CSS:

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

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

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

Essaye ça:

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

Utiliser white-space:nowrapetoverflow:hidden

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

dans votre utilisation css white-space:nowrap;

Votre code HTML: <div>Stack Overflow is the BEST !!!</div>

CSS:

div {
    width: 100px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

Maintenant, le résultat devrait être:

Stack Overf ...

Tout le monde a sauté sur celui-ci !!! Moi aussi j'ai fait un violon:

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

RobAgar obtient un point pour avoir souligné en white-space:nowrappremier.

Deux choses ici, vous avez besoin overflow: hiddensi vous ne voulez pas voir les caractères supplémentaires pénétrer dans votre mise en page.

En outre, comme mentionné, vous pouvez utiliser white-space: pre(voir EnderMB) en gardant à l'esprit que precela n'effondrera pas l'espace blanc alors qu'il le white-space: nowrapfera.

Essayez ceci. Il utilise preplutôt que nowrapcomme je suppose que vous voudriez que cela fonctionne de la même manière, <pre>mais l'un ou l'autre fonctionnera très bien:

div {
    border: 1px solid black;
    max-width: 70px;
    white-space:pre;
}

http://jsfiddle.net/NXchy/11/

J'ai sauté ici à la recherche de la même chose, mais aucune n'a fonctionné pour moi.

Il y a des cas où, quoi que vous fassiez et selon le système (Oracle Designer: Oracle 11g - PL / SQL), les divs iront toujours à la ligne suivante, auquel cas vous devriez utiliser la balise span à la place.

Cela a fait des merveilles pour moi.

<span float: left; white-space: nowrap; overflow: hidden; onmouseover="rollOverImageSectionFiveThreeOne(this)">
    <input type="radio" id="radio4" name="p_verify_type" value="SomeValue"  />
</span> 
Just Your Text || 
<span id="headerFiveThreeOneHelpText" float: left; white-space: nowrap; overflow: hidden;></span>

ajoutez ceci à votre div

white-space: nowrap;

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

div {
    display: flex;
    flex-direction: row; 
}

était la solution qui a fonctionné pour moi. Dans certains cas, avec div-lists, cela est nécessaire.

certaines valeurs de direction alternatives sont celles row-reverse, column, column-reverse, unset, initial, inherit qui font les choses que vous attendez qu’elles fassent

Essayez de définir une hauteur afin que le bloc ne puisse pas s'agrandir pour accueillir votre texte et conservez le overflow: hiddenparamètre

EDIT: Voici un exemple de ce que vous pourriez aimer si vous devez afficher 2 lignes de haut:

div {
    border: 1px solid black;
    width: 70px;
    height: 2.2em;
    overflow: hidden;
}