web-dev-qa-db-fra.com

Comment restreindre la limite de caractères par ligne ou # de caractères avec CSS?

Existe-t-il une propriété CSS qui peut effectuer l'une des opérations suivantes? Mais d'abord, laissez-moi vous expliquer.

Imaginez une disposition en maçonnerie où chaque élément a une largeur: 200 px; et chacun serait de hauteur: 250 px; (C'est juste un exemple).

Dans chaque élément, il y a une vignette et un lien, et souvent, ce lien se compose de 2 à 3 lignes et rend donc la hauteur de chaque élément différente.

Existe-t-il un moyen de définir un nombre maximal de caractères dans une classe ou de couper le retour à la ligne après un certain nombre de lignes? Et peut-être même ajouter un effet CSS pour insérer du contenu: "..."; avant la fin de la ligne pour montrer qu'elle a été coupée?

Toute aide est appréciée.

Je vous remercie.

csslayoutword-wrapcharacter-limit
13
popsicle

Tu peux essayer text-overflow, mais il a quelques restrictions, mais peut toujours vous convenir:

Exemple

<div id="container">
    This is some short content to demonstrate the css-property
    text-overflow
</div>​

#container{
    width:100px;
    height:50px;
    border:1px solid red;
    overflow:hidden;
    text-overflow:Ellipsis;
    white-space: nowrap;   
}​
25
Christoph

Pas des caractères, mais vous pouvez définir la largeur d'un élément en pixels et utiliser la propriété text-overflow qui devrait ajouter "...".

Vous pouvez également limiter le nombre de lignes en définissant la hauteur d'un élément à, par exemple, 30 pixels et en définissant la propriété CSS de hauteur de ligne à 15 pixels et en ajoutant overflow:hidden. De cette façon, vous aurez exactement deux lignes de texte.

.twoLines{
   height:30px;
   line-height:15px;
   overflow:hidden;
}
9
Viktor S.