recadrer le texte trop long à l'intérieur div
<div style="display:inline-block;width:100px;">
very long text
</div>
Tout moyen d'utiliser du CSS pur pour couper le texte trop long plutôt que de l'afficher sur la nouvelle ligne suivante et de ne montrer que max 100px
5 réponses
<div class="crop">longlong longlong longlong longlong longlong longlong </div>
C'est une approche possible à laquelle je peux penser
.crop {width:100px;overflow:hidden;height:50px;line-height:50px;}
De cette façon, le texte long sera toujours enveloppé mais ne sera pas visible en raison de overflow set, et en définissant line-height comme height, nous nous assurons qu'une seule ligne sera affichée.
Voir démo ici et belle propriété de débordement description avec des exemples interactifs.
, Vous pouvez utiliser:
overflow:hidden;
Pour masquer le texte en dehors de la zone.
Notez qu'il peut couper la dernière lettre (donc une partie de la dernière lettre sera toujours affichée). Une meilleure façon est d'afficher une ellipse à la fin. Vous pouvez le faire en utilisant text-overflow:
overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: ellipsis;
.crop {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
width:100px;
}
Le code ci-dessous masquera votre texte avec une largeur fixe que vous décidez. mais pas tout à fait raison pour les conceptions sensibles.
.CropLongTexts {
width: 170px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Mettre à jour
J'ai remarqué dans le (s) périphérique (s) (mobile) que le texte (mélangé) les uns avec les autres en raison de (largeur fixe)... j'ai donc édité le code ci-dessus pour devenir caché en réponse comme suit:
.CropLongTexts {
max-width: 170px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Le (max-width) garantit que le texte sera masqué de manière réactive quelle que soit la (taille de l'écran) et ne sera pas mélangé les uns avec les autres.
Pourquoi ne pas utiliser des unités relatives?
.cropText {
max-width: 20em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}