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


303

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 affiché sur plusieurs lignes.

Cela peut ressembler à:

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

3
Si ce sont chacune des lignes distinctes, vous n'avez vraiment à vous soucier que de faire une ligne et de répéter la fonctionnalité pour chaque ligne. Si ces lignes appartiennent toutes à la même phrase, vous devez probablement conserver les points de suspension uniquement sur la dernière ligne. Si vous utilisez des points de suspension à mi-chemin d'une phrase, vous faites essentiellement un trou dans votre phrase.
Wex


4
un bon article sur ce sujet css-tricks.com/line-clampin
Adrien Be

Veuillez voir le lien suivant pour ma réponse: stackoverflow.com/questions/536814/…
Shishir Arora

J'ai répondu à cela très en détail avec une solution CSS pure ici . Cela fonctionne de manière fiable. Comme mentionné dans cette réponse, c'est beaucoup plus facile à réaliser avec Javascript, mais si cela n'est pas envisageable, cela fonctionne .
dashard

Réponses:


84

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

Il y a aussi quelques tests de pré-performance .


57
Je n'ai vu aucune solution CSS pure à cette exigence
Jim Thomas

@Ovilia note que la solution de Jim comprend également un plugin jQuery appelé jquery.autoellipsis.js, vous devrez télécharger une inclusion séparément
Jeff

7
css multiline elipsis tutorial: mobify.com/dev/multiline-ellipsis-in-pure-css
Julien

2
Chers gens du futur: ce plugin est mon préféré, car il permet de basculer l'affichage du texte caché. http://keith-wood.name/more.html
brichins

1
Toutes les bibliothèques que j'ai ajoutées sont bonnes. Les tests de performances peuvent vous aider à décider, mais je voudrais mentionner que nous implémentons généralement dotdotdot en raison de sa large gamme de configuration et de code propre - facile à modifier. (Remarque, ce n'est qu'un point de vue personnel - qui n'a rien à voir avec la réponse.)
Milan Jaros

58

J'ai piraté jusqu'à ce que j'aie réussi à atteindre quelque chose de proche. Il vient avec quelques mises en garde:

  1. Ce n'est pas du CSS pur; vous devez ajouter quelques éléments HTML. Il n'y a cependant pas de JavaScript requis.
  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 (selon la longueur du premier mot caché).
  3. L'espace pour les points de suspension est toujours réservé. Cela signifie que si le texte tient presque précisément dans la boîte, il peut être inutilement tronqué (le dernier mot est masqué, bien qu'il ne soit pas techniquement 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ù ils ne sont pas nécessaires.

Je dois également noter que le texte sera rompu à la limite d'un mot et non à la limite d'un caractère. C'était délibéré (car je considère que c'est mieux pour les textes plus longs), mais parce que c'est différent de ce qui se text-overflow: ellipsispasse, j'ai pensé que je devrais le mentionner.

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

<div class="ellipsify">
    <div class="pre-dots"></div>
    <div class="dots">&hellip;</div>
    <!-- your text here -->
    <span class="hidedots1"></span>
    <div class="hidedots2"></div>
</div>

Et ceci est le CSS correspondant, en 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 comment cela fonctionne, voici la même image, sauf qu'elle .hidedots1est mise en évidence en rouge et .hidedots2en cyan. Ce sont les rectangles qui cachent les points de suspension lorsqu'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.


9
Vous ne avez pas vraiment besoin des 4 éléments html, fourni your textest emballé avec des <p>étiquettes (comme ils devraient l' être), vous pouvez utiliser .ellipsify p:beforeet .ellipsify p:afterpuis bien sûr vous devez .ellipsify p:before{content:"\2026";}l' \2026est le code pour les points de suspension, aussi, peuvent avoir besoin content:" ";comme ils peuvent ne pas fonctionner pour les éléments vides.
Val

2
Bien que je ne pense pas que cette réponse conviendra à de nombreuses situations, au moins une réponse non plugin, non JavaScript est fournie. C'est cela et l'ingéniosité qui ont contribué à la construction de cette réponse, c'est pourquoi je le fais +1.
VoidKing

@MichalStefanow Un seul - celui pour lequel je l'ai créé: Les descriptions sur les "cartes" de l'application sur Apptivate.MS, par exemple, voir apptivate.ms/users/1141291/blynn .
balpha

@Pavlo, j'aime vraiment votre solution. Mais cela semble fonctionner uniquement avec du texte standard donné, pas si je charge du texte à partir d'une base de données, car le script ne connaît pas la hauteur externe du texte chargé?
JonSnow

2
@SchweizerSchoggi, pseudo-éléments ou non, cette solution ne repose pas sur JS. Peu importe où vous obtenez le texte si vous l'implémentez correctement.
Pavlo

41

Voici un récent article css-tricks qui en discute.

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

1) -webkit-line-clampet 2) Placer un élément absolument positionné en bas à droite avec fondu sortant

Les deux méthodes supposent le balisage suivant:

<div class="module"> /* Add line-clamp/fade class here*/
  <p>Text here</p>
</div>

avec css

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

1) -webkit-line-clamp

serre-câble 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

Supposons que vous définissiez la hauteur de ligne sur 1,2 em. 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é masquera le reste.

Fade out FIDDLE

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 # 3 - Une combinaison utilisant @supports

Nous pouvons utiliser @supports pour appliquer le line-clamp de webkit sur les navigateurs webkit et appliquer un fondu sortant dans d'autres navigateurs.

@supports line-clamp avec fade fallback fiddle

<div class="module line-clamp">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

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;
    }
}

@ HP's411 Dans firefox, vous verrez un effet de fondu au lieu d'une ellipse
Danield

34

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

Prise en charge du navigateur - comme indiqué dans l'article:

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

Les navigateurs plus anciens fonctionneront toujours très bien, car la viande de la mise en page a des propriétés de positionnement, de marge et de rembourrage normales. si votre plateforme 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:

<div class="ellipsis">
    <div>
        <p>Call me Ishmael.  Some years ago &ndash; never mind how long precisely &ndash; 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 &ndash; then, I account it high time to get to sea as soon as I can.</p>  
    </div>
</div>

le violon

(redimensionner la fenêtre du navigateur pour les tests)


2
"Jusqu'à présent, nous avons testé ..." tout sauf Chrome?
stevenspiel

Test réussiChrome for Mac Version 48.0.2564.116
Adrien Be

21

Après avoir examiné la spécification W3 pour le débordement de texte , je ne pense pas que cela soit possible en utilisant uniquement CSS. Ellipsis est une propriété nouvelle, donc elle n'a probablement pas encore reçu beaucoup d'utilisation ou de commentaires.

Cependant, ce gars semble avoir posé une question similaire (ou identique), et quelqu'un a pu trouver une belle solution jQuery. 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 n'avez peut-être pas de chance ...


3
New-ish? MSIE l'a soutenu depuis IE6. Aujourd'hui, tous les navigateurs le prennent en charge, à l' exception de Firefox .
Christian

J'appellerais toute propriété CSS3 qui n'est pas implémentée globalement "new-ish". C'est juste une question de sémantique. De plus, vous rendez-vous compte que vous commentez un article qui a presque un an?
Jeff

5
Ce n'est pas CSS3, il est là depuis des lustres et largement adopté. Seule la spécification peut être considérée comme nouvelle. De plus, si SO ne voulait pas de commentaires sur les anciens threads, ils auraient pu le désactiver.
Christian

10

Je veux juste ajouter à cette question par souci d'exhaustivité.

  • Opera a une prise en charge non standard pour cette ligne appelée -o-ellipsis-lastline .
  • dotdotdot est un excellent plugin jQuery que je peux recommander.

Il semblerait -o-ellipsis-lastlinequ'il ait été supprimé lorsque Opera est passé à WebKit. Laissant une balle à des fins historiques.
Matt

8

Grande question ... J'aimerais qu'il y ait une réponse, mais c'est le plus proche que vous pouvez obtenir avec CSS de nos jours. Pas d'ellipse, mais tout de même assez utilisable.

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

en fait, la réponse de Kevin est la plus proche que vous pouvez obtenir avec CSS ces jours-ci stackoverflow.com/a/14248844/759452
Adrien Be

7

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 tronque simplement le texte. Ce qui est bien pour mon utilisation prévue.

$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


-webkit-line-clampsupport du navigateur caniuse.com/#search=-webkit-line-clamp
Adrien Be

6

Voici la solution la plus proche que j'ai pu obtenir en utilisant simplement CSS.

HTML

<div class="ellipsis"> <span>...</span>
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>

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;
}

Violon de travail ( redimensionnez la fenêtre pour vérifier )

Lien vers mon blog pour explication

Fiddle mis à jour

J'espère que maintenant un expert css aurait eu une idée sur la façon de le rendre parfait. :)


Cette réponse me fait mal au ventre. Tout d'abord, vous n'utilisez pas de points de suspension typographiquement disponibles… (c'est un symbole de police occupant un espace). Compare smashingmagazine.com/2008/08/11/top-ten-web-typography-sins Et avec votre solution, vous ne pouvez pas vraiment contrôler où se trouvent les points de suspension, de sorte qu'il peut arriver à des situations indésirables, comme pour les points dans une rangée .
Volker E.

1
@VolkerE. Merci pour l'information. Voici le violon mis à jour . veuillez me faire savoir si je manque un point dans votre explication.
Mr_Green

Excellente solution (l'original), mais pourquoi ne pas utiliser à la div::beforeplace de cela span? :)
Adam

@Adam, il y avait un cas de bord, donc je n'ai pas utilisé de pseudo-élément. ( Je ne m'en souviens pas maintenant )
Mr_Green

5

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

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

La mise en garde est qu'il ne fournit pas de points de suspension pour les navigateurs qui ne prennent pas en charge la -webkit-line-clamprègle (actuellement IE, Edge, Firefox) mais il utilise un dégradé pour estomper 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;
  }
}
<p class="clampMe">There's a lot more text in here than what you'll ever see. Pellentesque habitant testalotish morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

Vous pouvez le voir en action dans ce CodePen et vous pouvez également voir une version Javascript ici (pas de jQuery).


4

Un peu tard pour cette fête mais j'ai trouvé, ce que je pense, une solution unique. Plutôt que d'essayer d'insérer vos propres points de suspension par le biais de tromperie CSS ou js, je pensais que j'essaierais de rouler avec la seule restriction de ligne unique. Donc je duplique le texte pour chaque "ligne" et j'utilise juste un retrait de texte négatif pour m'assurer qu'une ligne commence là où la dernière 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:

<p id="wrapper" class="redraw">
    <span class="text-block-line line1">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.</span>
    <span class="text-block-line line2">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.</span>
    <span class="text-block-line line3">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.</span>
    <span class="text-block-line line4">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.</span>
</p>

Plus de détails au violon. Il y a un problème avec le navigateur qui indique que j'utilise un redessin JS et donc vérifiez-le, mais c'est le concept de base. Toutes les pensées / suggestions sont très appréciées.


1
Je n'aime pas l'idée de dupliquer chaque ligne de texte. De plus - et si le texte est dynamique - vous ne saurez pas combien de lignes ajouter. Cela étant dit, +1 pour cette solution unique!
Danield

Merci pour l'entrée :) Le texte dynamique n'est pas un problème. Il définit à la place la hauteur maximale du conteneur sur le modèle. Si vous voulez le limiter à 3 lignes, faites-en 3. Mon cas d'utilisation a un titre qui peut être de 1 à 2 lignes et un extrait qui peut être de 1 à 3. Ce sont des valeurs connues. Peu importe la longueur de la chaîne. De plus, si vous le faites dans une situation de modèle et non en HTML statique, vous pouvez le faire gérer le retrait de texte négatif avec un style en ligne afin que vous n'ayez pas besoin de ce gros bloc de ligne1, ligne2, ligne3, etc. Je peux fouetter un violon utilisant le modèle js comme exemple.
lupos

Serait utile si la rupture des mots n'est pas un problème dans le projet.
Mr_Green

3

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

aucun js n'est nécessaire dans cette méthode.

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

le innerHTMLde .ellipsis-placeholdern'est pas nécessaire, j'utilise .ellipsis-placeholderpour garder la même largeur et hauteur avec .ellipsis-more. Vous pouvez utiliser à la display: inline-blockplace.

.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;
}
<div class="ellipsis ellipsis-height ellipsis-line-height">
    <div class="ellipsis-more-top ellipsis-height"></div>
    <div class="ellipsis-text-container">
        <div class="ellipsis-placeholder-top ellipsis-height ellipsis-margin-top"></div>
        <div class="ellipsis-placeholder">
           <span>...</span><span>more</span>
        </div>
        <span class="ellipsis-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 text </span>
    </div>
    <div class="ellipsis-more-container ellipsis-margin-top">
        <div class="ellipsis-more">
            <span>...</span><span>more</span>
        </div>
    </div>
</div>

jsfiddler


2

la solution javascript sera meilleure

  • obtenir le nombre de lignes de texte
  • basculer la is-ellipsisclasse si la fenêtre est redimensionnée ou modifiée

getRowRects

Element.getClientRects()fonctionne comme ça

entrez la description de l'image ici

chaque rects dans la même ligne a la même topvaleur, alors découvrez les rects avec une topvaleur différente , comme ceci

entrez 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<len; i++) {
        has = false;
        rectsLen = rects.length;
        clientRect = clientRects[i];
        top = clientRect.top;
        while(rectsLen--) {
            rect = rects[rectsLen];
            if (rect.top == top) {
                has = true;
                break;
            }
        }
        if(has) {
            rect.right = rect.right > 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;
}

flotte ...more

comme ça

entrez la description de l'image ici

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

comme ça

entrez la description de l'image ici

entrez la description de l'image ici

entrez la description de l'image ici



0

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;
    /**/
}
<div class='ellipsis'>
    <div class='content'>
        <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div>
        <div class='overlay'>
            <div class='placeholder'></div>
            <div class='more'>...more</div>
        </div>
    </div>
</div>


-1

J'ai trouvé une astuce 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 ie

//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;
}

Très probablement, nous n'utilisons pas de polices à largeur fixe partout. Cette astuce peut donc échouer dans ces situations.
Ovilia
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.