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:
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:
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:
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; }
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 */ }
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%); }
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.
.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
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); }
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.
(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.
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.
... 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.
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; }
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:
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
is-ellipsis
class si la fenêtre redimensionne ou change d’élément Element.getClientRects()
fonctionne comme ça
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
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; }
...more
comme ça
comme ça
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
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; }