web-dev-qa-db-fra.com

HTML + CSS: Comment forcer les contenus div à rester sur une ligne?

J'ai un long texte à l'intérieur d'une 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 dans 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é.

htmlcss
206
Misha Moroshko

Essaye ça:

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

Utilisez white-space:nowrap et overflow:hidden

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

64
anothershrubery

dans votre css, utilisez white-space:nowrap;

46
Rob Agar

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 ...
11
bozlur rahman

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

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

RobAgar obtient un point pour avoir signalé white-space:nowrap en premier.

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

De plus, comme mentionné, vous pouvez utiliser white-space: pre (voir EnderMB) en gardant à l'esprit que pre ne réduira pas les espaces, contrairement à white-space: nowrap.

11
Marc Audet

Essayez ceci. Il utilise pre plutôt que nowrap car je suppose que vous voudriez que cela fonctionne de manière similaire à <pre>

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

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

3
Mike B

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

Il existe des cas où, indépendamment de ce que vous faites et selon le système (Oracle Designer: Oracle 11g - PL/SQL), les div vont toujours à la ligne suivante, auquel cas vous devriez utiliser la balise span à la place.

Cela a fonctionné à merveille 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>
3
Dököll

ajoutez ceci à votre div

white-space: nowrap;

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

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

0
Pingger Shikkoken

Essayez de définir une hauteur afin que le bloc ne puisse pas grandir pour accueillir votre texte et conservez le paramètre overflow: hidden.

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

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