Avec CSS, utilisez «…» pour le bloc de lignes multiples débordé

avec

overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 

“…” sera affiché à la fin de la ligne en cas de débordement. Cependant, cela ne sera affiché que sur une seule ligne. Mais je voudrais qu’il soit montré en multi-lignes.

Cela peut ressembler à:

 +--------------------+ |abcde feg hij dkjd| |dsji jdia js ajid s| |jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */ +--------------------+ 

Il existe également plusieurs plugins jquery qui traitent de ce problème, mais beaucoup ne traitent pas plusieurs lignes de texte. Travaux suivants:

Il y a aussi des tests de préforme .

J’ai piraté jusqu’à ce que je parvienne à réaliser quelque chose de proche. Il vient avec quelques réserves:

  1. Ce n’est pas du pur CSS; vous devez append quelques éléments HTML. Il n’y a cependant pas de JavaScript requirejs.
  2. Les points de suspension sont alignés à droite sur la dernière ligne. Cela signifie que si votre texte n’est pas aligné à droite ou justifié, il peut y avoir un écart notable entre le dernier mot visible et les points de suspension (en fonction de la longueur du premier mot caché).
  3. L’espace pour les points de suspension est toujours réservé. Cela signifie que si le texte rentre dans la boîte presque avec précision, il peut être inutilement tronqué (le dernier mot est caché, bien qu’il ne soit techniquement pas nécessaire).
  4. Votre texte doit avoir une couleur d’arrière-plan fixe, car nous utilisons des rectangles colorés pour masquer les points de suspension dans les cas où cela n’est pas nécessaire.

Je devrais également noter que le texte sera brisé à une limite de mot, pas une limite de caractère. C’était délibéré (puisque je considère cela mieux pour des textes plus longs), mais parce que c’est différent de ce que le text-overflow: ellipsis fait, j’ai pensé que je devrais le mentionner.

Si vous pouvez vivre avec ces mises en garde, le HTML ressemble à ceci:

 

Et ceci est le CSS correspondant, utilisant l’exemple d’une boîte de 150 pixels de large avec trois lignes de texte sur fond blanc. Il suppose que vous avez une réinitialisation CSS ou similaire qui définit les marges et les remplissages à zéro si nécessaire.

 /* the wrapper */ .ellipsify { font-size:12px; line-height:18px; height: 54px; /* 3x line height */ width: 150px; overflow: hidden; position: relative; /* so we're a positioning parent for the dot hiders */ background: white; } /* Used to push down .dots. Can't use absolute positioning, since that would stop the floating. Can't use relative positioning, since that would cause floating in the wrong (namely: original) place. Can't change height of #dots, since it would have the full width, and thus cause early wrapping on all lines. */ .pre-dots { float: right; height: 36px; /* 2x line height (one less than visible lines) */ } .dots { float: right; /* to make the text wrap around the dots */ clear: right; /* to push us below (not next to) .pre-dots */ } /* hides the dots if the text has *exactly* 3 lines */ .hidedots1 { background: white; width: 150px; height: 18px; /* line height */ position: absolute; /* otherwise, because of the width, it'll be wrapped */ } /* hides the dots if the text has *less than* 3 lines */ .hidedots2 { background: white; width: 150px; height: 54px; /* 3x line height, to ensure hiding even if empty */ position: absolute; /* ensures we're above the dots */ } 

Le résultat ressemble à ceci:

image du résultat rendu avec différentes longueurs de texte

Pour clarifier son fonctionnement, voici la même image, sauf que .hidedots1 est en rouge et que .hidedots2 en cyan. Ce sont les rectangles qui cachent les points de suspension quand il n’y a pas de texte invisible:

la même image que ci-dessus, sauf que les éléments d'aide sont mis en évidence en couleur

Testé dans IE9, IE8 (émulé), Chrome, Firefox, Safari et Opera. Ne fonctionne pas dans IE7.

Voici un article css-sortingcks récent qui traite de ceci.

Certaines des solutions de l’article ci-dessus (qui ne sont pas mentionnées ici) sont

1) -webkit-line-clamp and 2) Placer un élément absolument positionné en bas à droite avec fondu en sortie

Les deux méthodes supposent le balisage suivant:

 
/* Add line-clamp/fade class here*/

Text here

avec css

 .module { width: 250px; overflow: hidden; } 

1) -webkit-line-clamp

pince de ligne FIDDLE (..pour un maximum de 3 lignes)

 .line-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-height: 3.6em; /* I needed this to get it to work */ } 

2) disparaître

Disons que vous définissez la hauteur de ligne à 1.2em. Si nous voulons exposer trois lignes de texte, nous pouvons simplement faire la hauteur du conteneur 3.6em (1.2em × 3). Le débordement caché cachera le rest.

FIDDLE disparaît

 p { margin:0;padding:0; } .module { width: 250px; overflow: hidden; border: 1px solid green; margin: 10px; } .fade { position: relative; height: 3.6em; /* exactly three lines */ } .fade:after { content: ""; text-align: right; position: absolute; bottom: 0; right: 0; width: 70%; height: 1.2em; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); } 

Solution n ° 3 – Une combinaison utilisant @supports

Nous pouvons utiliser @supports pour appliquer le clamp de ligne de webkit sur les navigateurs Webkit et appliquer la sortie en fondu dans d’autres navigateurs.

@supports line-clamp avec fiddle repli fiddle

 

Pellentesque habitant morbi sortingstique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ulsortingcies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ulsortingcies mi vitae est. Mauris placerat eleifend leo.

CSS

 .module { width: 250px; overflow: hidden; border: 1px solid green; margin: 10px; } .line-clamp { position: relative; height: 3.6em; /* exactly three lines */ } .line-clamp:after { content: ""; text-align: right; position: absolute; bottom: 0; right: 0; width: 70%; height: 1.2em; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); } @supports (-webkit-line-clamp: 3) { .line-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-height:3.6em; /* I needed this to get it to work */ height: auto; } .line-clamp:after { display: none; } } 

Le lien ci-dessous fournit une solution HTML / CSS pure à ce problème.

Support du navigateur – comme indiqué dans l’article:

Jusqu’à présent, nous avons testé Safari 5.0, IE 9 (doit être en mode standard), Opera 12 et Firefox 15.

Les anciens navigateurs fonctionneront toujours assez bien, car la disposition de la mise en page se trouve dans les propriétés de positionnement, de marge et de remplissage normales. Si votre plate-forme est plus ancienne (par exemple, Firefox 3.6, IE 8), vous pouvez utiliser la méthode mais refaire le dégradé en tant qu’image PNG autonome ou filtre DirectX.

http://www.mobify.com/dev/multiline-ellipsis-in-pure-css

le css:

 p { margin: 0; padding: 0; font-family: sans-serif;} .ellipsis { overflow: hidden; height: 200px; line-height: 25px; margin: 20px; border: 5px solid #AAA; } .ellipsis:before { content:""; float: left; width: 5px; height: 200px; } .ellipsis > *:first-child { float: right; width: 100%; margin-left: -5px; } .ellipsis:after { content: "\02026"; box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; float: right; position: relative; top: -25px; left: 100%; width: 3em; margin-left: -3em; padding-right: 5px; text-align: right; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white)); background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); } 

le html:

 

Call me Ishmael. Some years ago – never mind how long precisely – having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen, and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off – then, I account it high time to get to sea as soon as I can.

le violon

(redimensionner la fenêtre du navigateur pour tester)

Après avoir examiné la spécification W3 pour le débordement de texte , je ne pense pas que ce soit possible en utilisant uniquement CSS. Ellipsis est une propriété new-ish, elle n’a donc probablement pas encore été utilisée ou commentée.

Cependant, ce type semble avoir posé une question similaire (ou identique), et quelqu’un a pu trouver une solution jQuery agréable. Vous pouvez faire une démonstration de la solution ici: http://jsfiddle.net/MPkSF/

Si javascript n’est pas une option, je pense que vous risquez de ne pas avoir de chance …

Je veux juste append à cette question pour être complet.

  • Opera dispose d’un support non standard appelé -o-ellipsis-lastline .
  • dotdotdot est un excellent plugin jQuery que je peux recommander.

Bonne question … J’aimerais qu’il y ait une réponse, mais c’est la plus proche que vous pouvez obtenir avec CSS ces jours-ci. Pas de points de suspension, mais toujours très utilisable.

 overflow: hidden; line-height: 1.2em; height: 3.6em; // 3 lines * line-height 

J’ai trouvé cette solution css (scss) qui fonctionne assez bien. Sur les navigateurs Webkit, il affiche les points de suspension et, sur les autres navigateurs, il ne fait que tronquer le texte. Ce qui est bien pour mon usage prévu.

 $font-size: 26px; $line-height: 1.4; $lines-to-show: 3; h2 { display: block; /* Fallback for non-webkit */ display: -webkit-box; max-width: 400px; height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */ margin: 0 auto; font-size: $font-size; line-height: $line-height; -webkit-line-clamp: $lines-to-show; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } 

Un exemple du créateur: http://codepen.io/martinwolf/pen/qlFdp

Voici la solution la plus proche que je pourrais utiliser avec css.

HTML

 
... Hello this is Mr_Green from Stackoverflow. I love CSS. I live in CSS and I will never leave working on CSS even my work is on other technologies.

CSS

 div { height: 3em; line-height: 1.5em; width: 80%; border: 1px solid green; overflow: hidden; position: relative; } div:after { content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ."; background-color: white; color: white; display: inline; position: relative; box-shadow: 8px 1px 1px white; z-index: 1; } span { position: absolute; bottom: 0px; right: 0px; background-color: white; } 

Working Fiddle ( redimensionner la fenêtre pour vérifier )

Lien vers mon blog pour des explications

Violon mis à jour

J’espère que maintenant, un expert en CSS aurait une idée sur la façon de le rendre parfait. 🙂

Dans votre cas, les éléments suivants doivent être efficaces et suffisants.

  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; 

Un peu tard pour cette fête, mais je suis arrivé à une solution unique. Plutôt que d’essayer d’insérer vos propres points de suspension via la supercherie CSS ou js, j’ai pensé essayer de rouler avec la seule ressortingction sur une seule ligne. Donc, je duplique le texte pour chaque “ligne” et utilise simplement un retrait de texte négatif pour m’assurer qu’une ligne commence là où le dernier s’arrête. VIOLON

CSS:

 #wrapper{ font-size: 20pt; line-height: 22pt; width: 100%; overflow: hidden; padding: 0; margin: 0; } .text-block-line{ height: 22pt; display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; width: auto; } .text-block-line:last-child{ text-overflow: ellipsis; } /*the follwing is suboptimal but neccesary I think. I'd probably just make a sass mixin that I can feed a max number of lines to and have them avialable. Number of lines will need to be controlled by server or client template which is no worse than doing a character count clip server side now. */ .line2{ text-indent: -100%; } .line3{ text-indent: -200%; } .line4{ text-indent: -300%; } 

HTML:

 

This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect. This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect. This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect. This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.

Plus de détails dans le violon Il y a un problème avec le navigateur qui rediffuse pour lequel j’utilise une redéfinition de JS, tel est le concept de base. Toutes les pensées / suggestions sont très appréciées.

merci @balpha et @Kevin, je combine deux méthodes ensemble.

aucun js nécessaire dans cette méthode.

vous pouvez utiliser background-image et aucun dégradé nécessaire pour masquer les points.

la .ellipsis-placeholder de .ellipsis-placeholder n’est pas nécessaire, j’utilise .ellipsis-placeholder à .ellipsis-placeholder pour conserver la même largeur et la même hauteur avec .ellipsis-more . Vous pouvez utiliser display: inline-block place.

 .ellipsis { overflow: hidden; position: relative; } .ellipsis-more-top {/*push down .ellipsis-more*/ content: ""; float: left; width: 5px; } .ellipsis-text-container { float: right; width: 100%; margin-left: -5px; } .ellipsis-more-container { float: right; position: relative; left: 100%; width: 5px; margin-left: -5px; border-right: solid 5px transparent; white-space: nowrap; } .ellipsis-placeholder {/*keep text around ,keep it transparent ,keep same width and height as .ellipsis-more*/ float: right; clear: right; color: transparent; } .ellipsis-placeholder-top {/*push down .ellipsis-placeholder*/ float: right; width: 0; } .ellipsis-more {/*ellipsis things here*/ float: right; } .ellipsis-height {/*the total height*/ height: 3.6em; } .ellipsis-line-height {/*the line-height*/ line-height: 1.2; } .ellipsis-margin-top {/*one line height*/ margin-top: -1.2em; } .ellipsis-text { word-break: break-all; } 
 
...more
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
...more

Il y a beaucoup de réponses ici mais j’en avais besoin d’un qui était:

  • CSS uniquement
  • A l’épreuve du temps (devient plus compatible avec le temps)
  • Ne va pas séparer les mots (seulement les pauses sur les espaces)

La mise en garde est qu’il ne fournit pas de points de suspension pour les navigateurs qui ne supportent pas la règle -webkit-line-clamp (actuellement IE, Edge, Firefox), mais utilise un dégradé pour afficher leur texte.

 .clampMe { position: relative; height: 2.4em; overflow: hidden; } .clampMe:after { content: ""; text-align: right; position: absolute; bottom: 0; right: 0; width: 50%; height: 1.2em; /* Just use multiples of the line-height */ background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%); } /* Now add in code for the browsers that support -webkit-line-clamp and overwrite the non-supportive stuff */ @supports (-webkit-line-clamp: 2) { .clampMe { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .clampMe:after { display: none; } } 
 

There's a lot more text in here than what you'll ever see. Pellentesque habitant testalotish morbi sortingstique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ulsortingcies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ulsortingcies mi vitae est. Mauris placerat eleifend leo.

solution javascript sera mieux

  • obtenir le nombre de lignes du texte
  • toggle is-ellipsis class si la fenêtre redimensionne ou change d’élément

getRowRects

Element.getClientRects() fonctionne comme ça

entrer la description de l'image ici

chaque rect dans la même rangée a la même valeur top , donc trouvez les rects avec une valeur top différente, comme ceci

entrer la description de l'image ici

 function getRowRects(element) { var rects = [], clientRects = element.getClientRects(), len = clientRects.length, clientRect, top, rectsLen, rect, i; for(i=0; i clientRect.right ? rect.right : clientRect.right; rect.width = rect.right - rect.left; } else { rects.push({ top: clientRect.top, right: clientRect.right, bottom: clientRect.bottom, left: clientRect.left, width: clientRect.width, height: clientRect.height }); } } return rects; } 

float ...more

comme ça

entrer la description de l'image ici

détecter le redimensionnement de la fenêtre ou de l’élément modifié

comme ça

entrer la description de l'image ici

entrer la description de l'image ici

entrer la description de l'image ici

 display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; 

voir plus cliquez ici

une base de méthode css pure sur -webkit-line-clamp:

 @-webkit-keyframes ellipsis {/*for test*/ 0% { width: 622px } 50% { width: 311px } 100% { width: 622px } } .ellipsis { max-height: 40px;/* h*n */ overflow: hidden; background: #eee; -webkit-animation: ellipsis ease 5s infinite;/*for test*/ /** overflow: visible; /**/ } .ellipsis .content { position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; font-size: 50px;/* w */ line-height: 20px;/* line-height h */ color: transparent; -webkit-line-clamp: 2;/* max row number n */ vertical-align: top; } .ellipsis .text { display: inline; vertical-align: top; font-size: 14px; color: #000; } .ellipsis .overlay { position: absolute; top: 0; left: 50%; width: 100%; height: 100%; overflow: hidden; /** overflow: visible; left: 0; background: rgba(0,0,0,.5); /**/ } .ellipsis .overlay:before { content: ""; display: block; float: left; width: 50%; height: 100%; /** background: lightgreen; /**/ } .ellipsis .placeholder { float: left; width: 50%; height: 40px;/* h*n */ /** background: lightblue; /**/ } .ellipsis .more { position: relative; top: -20px;/* -h */ left: -50px;/* -w */ float: left; color: #000; width: 50px;/* width of the .more w */ height: 20px;/* h */ font-size: 14px; /** top: 0; left: 0; background: orange; /**/ } 
 
text text text text text text text text text text text text text text text text text text text text text
...more

J’ai trouvé un truc javascript, mais vous devez utiliser la longueur de la chaîne. Disons que vous voulez 3 lignes de largeur 250px, vous pouvez calculer la longueur par ligne, c.-à-d.

 //get the total character length. //Haha this might vary if you have a text with lots of "i" vs "w" var totalLength = (width / yourFontSize) * yourNumberOfLines //then ellipsify function shorten(text, totalLength) { var ret = text; if (ret.length > totalLength) { ret = ret.substr(0, totalLength-3) + "..."; } return ret; }