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é.
Essaye ça:
div {
border: 1px solid black;
width: 70px;
overflow: hidden;
white-space: nowrap;
}
Utilisez white-space:nowrap
et overflow:hidden
dans votre css, utilisez 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 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
.
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;
}
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>
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
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;
}