HTML+CSS: comment forcer div contents à rester dans une ligne?

utiliser white-space:nowrap et overflow:hidden

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

dans votre css utilisez white-space:nowrap;

tout le monde a sauté sur celui-ci!!! J'ai aussi fait un violon:

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

RobAgar obtient un point pour pointer white-space:nowrap d'abord.

deux choses ici, vous avez besoin de overflow: hidden si vous ne voulez pas voir les caractères supplémentaires qui apparaissent dans votre mise en page.

aussi, comme mentionné, vous pouvez utiliser white-space: pre (voir EnderMB) n'oubliez pas que pre ne va pas s'effondrer espace blanc tandis que white-space: nowrap va.

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

ajoutez ceci à votre div

white-space: nowrap;

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

essayez ça. Il utilise pre au lieu de nowrap comme je suppose que vous voudriez que cela s'exécute de la même façon que <pre> mais l'un ou l'autre fonctionne 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 personne n'a travaillé pour moi.

il y a des cas où, peu importe ce que vous faites, et selon le système (Oracle Designer: Oracle 11g - PL/SQL), les divs iront toujours à la ligne suivante, auquel cas vous devriez utiliser l'étiquette de portée à 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>

essayez de définir une hauteur de sorte que le bloc ne puisse pas croître pour accommoder votre texte, et gardez le overflow: hidden paramètre

EDIT: voici un exemple de ce que vous pourriez aimer si vous avez besoin d'afficher 2 lignes de haut:

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

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

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

certaines valeurs de direction alternatives sont row-reverse, column, column-reverse, unset, initial, inherit qui font ce que vous attendez d'eux