CSS - comment couper la sortie de texte?

Question

J'ai une quantité arbitraire de texte qui sera affichée dans un espace confiné.

Comment est-ce que je peux découper la sortie afin que ce qui est "au-delà" de la boîte ne soit pas affiché, ou comment puis-je forcer la boîte pour créer une barre de défilement verticale?

Answer 1

La propriété overflow. Vous pouvez définir la valeur hidden pour masquer les données et scroll pour faire défiler les données.

<div class="text">this is some text that would be very long...</div> 

//Hidden 
.text 
{ 
    overflow: hidden; 
    width: 50px; 
    height: 50px 
} 
//Scroll  
.text 
{ 
    overflow: scroll; 
    width: 50px; 
    height: 50px 
} 

Answer 2

Jetez un coup d'œil à overflow. overflow: hidden contenu de clips, overflow:Scroll ajoute une barre de défilement.

Answer 3

Comment puis-je couper la sortie de sorte que tout ce qui est « au-delà » de la boîte n'est pas affiché

Utilisez overflow: hidden

Comment puis-je forcer la boîte à créer un barre de défilement verticale?

Utilisez overflow: auto. Pour utiliser ceci, cependant, assurez-vous que vous avez une largeur/hauteur spécifiée sur la case

Answer 4

habituellement 'overflow: auto' devrait fonctionner s'il y a une hauteur/largeur définie. Vous pouvez forcer une barre de défilement avec 'overflow: scroll'. Vous pouvez cacher n'importe quoi avec 'overflow: hidden;' La clé de débordement avec les styles CSS est la hauteur et la largeur doivent être déterminées par le navigateur afin qu'il sache quand débuter le débordement.

Answer 5

Pour HTML:

<div id="smallBoxWithLotsOfText">There is way more text in here than what 
    I have typed. I mean, this text is long. There is lots of it. 
    You can't even imagine how long this text is gonna get. No joking. 
    It's long; it's very, very long. It keeps going, and going, and going. 
    It's the Energizer Bunny of text. Like, seriously dude. It's crazy. 
    Absolutely crazy. 
</div> 

Essayez CSS:

#smallBoxWithLotsOfText { 
    width: 100%; 
    height: 100px; 
    overflow: auto; 
} 

La propriété hauteur indique la case à quelle hauteur soit. La propriété overflow indique à la boîte d'ajouter une barre de défilement lorsque le contenu est plus grand, mais pas toujours une barre de défilement (comme le fait scroll).

Vous pouvez see this in action.

Answer 6

Vous pouvez essayer d'utiliser des points de suspension en ajoutant ce qui suit dans CSS:

.truncate { 
    width: 250px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

d'autres façons de rogner le texte et montrer des points de suspension se trouvent ici: http://blog.sanuker.com/?p=631