web-dev-qa-db-fra.com

recadrer le texte trop longtemps dans div

<div style="display:inline-block;width:100px;">

very long text
</div>

n'importe quel moyen d'utiliser des CSS purs pour couper le texte trop long plutôt que de le montrer sur la nouvelle ligne suivante et d'afficher uniquement 100 pixels maximum

htmlcss3css
73
cometta
<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 renvoyé à la ligne mais ne sera pas visible à cause de overflow set, et en définissant line-height identique à height nous nous assurons qu’une seule ligne sera affichée.

Voir démo ici et Nice propriété de débordement description avec des exemples interactifs.

50
Davor Lucic

Vous pouvez utiliser:

overflow:hidden;

masquer le texte en dehors de la zone.

Notez que cela peut couper la dernière lettre (de sorte qu'une partie de la dernière lettre sera toujours affichée). Un moyen plus agréable consiste à afficher un Ellipsis à la fin. Vous pouvez le faire en utilisant text-overflow :

overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: Ellipsis;
142
Arseni Mourzenko
.crop { 
  overflow:hidden; 
  white-space:nowrap; 
  text-overflow:Ellipsis; 
  width:100px; 
}​

http://jsfiddle.net/hT3YA/

26
s1ntez

Pourquoi ne pas utiliser des unités relatives?

.cropText {
    max-width: 20em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: Ellipsis;
}
6
Tomas Macek

Le code ci-dessous cachera votre texte avec une largeur fixe que vous déciderez. mais pas tout à fait correct pour les conceptions réactives.

.CropLongTexts {
  width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: Ellipsis;
}

Mise à jour

J'ai remarqué sur les appareils (mobiles) que le texte (mélangé) entre eux en raison de (largeur fixe) ... j'ai donc modifié le code ci-dessus pour qu'il soit masqué de manière réactive comme suit:

.CropLongTexts {
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: Ellipsis;
}

La (largeur maximale) assure que le texte sera masqué en réponse quelle que soit la taille de l'écran et ne sera pas mélangé les uns avec les autres.

4
Al3abMizo Games