ellipses css sur la deuxième ligne

208

CSS text-overflow: ellipsisen deuxième ligne, est-ce possible? Je ne le trouve pas sur le net.

exemple:

ce que je veux c'est comme ça:

I hope someone could help me. I need 
an ellipsis on the second line of...

mais ce qui se passe est le suivant:

I hope someone could help me. I ... 
Reigel
la source
3
AFAIK les points de suspension apparaîtront et couperont le texte à la fin de la largeur de l'élément. Il ne passera pas à la ligne suivante. La meilleure solution ici serait d'implémenter un script côté serveur ou client qui ajuste automatiquement le texte à une certaine quantité de caractères, puis ajoute les points de suspension. Je suppose qu'un script côté client serait mieux, ce qui vous permettrait d'avoir toujours tout le texte original disponible si vous en avez besoin.
FarligOpptreden
voici une question similaire: stackoverflow.com/questions/3922739/…
Evgeny
tl; dr: c'est possible uniquement dans le webkit
Evgeny
Le plus près que j'ai pu obtenir était d'ajouter un pseudo-élément «après» pour les points de suspension et de le positionner en ligne, directement après l'élément contenant le texte. Mais les points de suspension disparaissent si le texte de l'élément est trop long, vous devrez donc le rogner d'une manière ou d'une autre, afin de le rendre fiable.
Jonathan

Réponses:

105

Une exigence pour text-overflow: ellipsis;travailler est une version à une ligne de white-space( pre, nowrapetc.). Ce qui signifie que le texte n'atteindra jamais la deuxième ligne.

Ergo. Pas possible en CSS pur.

Ma source quand je cherchais exactement la même chose tout à l'heure: http://www.quirksmode.org/css/textoverflow.html (Quirksmode ftw!)

EDIT Si les bons dieux CSS implémenteront http://www.w3.org/TR/css-overflow-3/#max-lines, nous pouvons le faire en CSS pur en utilisant fragments(nouveau) et max-lines(nouveau). Aussi plus d'informations sur http://css-tricks.com/line-clampin/

EDIT 2 WebKit / Blink a line-clamp: -webkit-line-clamp: 2mettra des points de suspension sur la 2e ligne.

Rudie
la source
9
Garder une montre, mais jusqu'à présent, il semble que les dieux ne soient pas encore avec nous: caniuse.com/#search=max-lines
Daniel
1
Comment réaliser la fonctionnalité ci-dessus avec des saas? @Rudie
Bhoomi Bhalani
144

Cela devrait fonctionner dans les navigateurs webkit :

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
Skeep
la source
1
Notez que, à partir de ce commentaire, -webkit-line-clamp ne respecte pas la visibilité: caché. bugs.webkit.org/show_bug.cgi?id=45399
Kevin
1
Hé - ça a l'air sympa mais ça ne marche pas pour moi. Il met simplement '...' à la ligne-pince donnée mais ne coupe pas le reste du texte (même avec un espace blanc)
lemoid
3
Vous devrez peut-être ajouter overflow: hiddenpour que cela fonctionne.
Robert
Cela ne fonctionnera pas dans Firefox, le
kit web
Cela devrait être la réponse acceptée. Vous ne voulez pas non plus de remplissage au bas de l'élément auquel vous l'appliquez, car vous pouvez voir le reste du texte.
Tr1stan
34

Comme d'autres l'ont déjà répondu, il n'existe pas de solution CSS pure. Il existe un plugin jQuery très facile à utiliser, il s'appelle dotdotdot . Il utilise la largeur et la hauteur du conteneur pour calculer s'il doit tronquer et ajouter des points de suspension.

$("#multilinedElement").dotdotdot();

Voici un jsFiddle .

Giohji
la source
Ce plugin fournit également de nombreux autres utilitaires comme l'ajout de liens "en savoir plus", il peut également analyser les URI et le balisage HTML. Bonne trouvaille!
Martin Andersson
2
J'ai essayé jQuery dotdotdot 1.7.3 pour une boutique de commerce électronique, pour limiter les noms de produits sur une page de catégorie de grille à deux lignes. Après des tests approfondis, nous avons décidé de ne pas utiliser ce plugin car parfois, après une actualisation par décalage, la mise en page de la catégorie était cassée. YMMV. À la fin, nous avons opté pour une solution JS vanille très simple: si l'élément clientHeight de l'élément de nom de produit est inférieur à son scrollHeight, tronquez le texte à une limite prédéfinie et ajoutez "...". Parfois, quelques noms de produits peuvent être un peu trop courts en raison de la limite prédéfinie, mais c'est super stable.
thdoan
1
Easty à mettre en œuvre et fonctionne à merveille. Je vous remercie!
Rachel S
Bien que cela fonctionne bien, il souffre malheureusement de problèmes de performances. Si votre projet nécessite plusieurs utilisations de points de suspension, envisagez une autre option. En outre, voici une citation du référentiel: "Parce que ses performances ne peuvent pas être améliorées, ce plugin n'est plus activement maintenu.".
boyomarinov
1
aussi, cela ne fonctionnerait pas si le texte change dynamiquement après le chargement :(
Dejell
34

J'ai trouvé que la réponse de Skeep n'était pas suffisante et avait également besoin d'un overflowstyle:

overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
Simon H
la source
18

si quelqu'un utilise SASS / SCSS et tombe sur cette question - peut-être que ce mixage pourrait être utile:

@mixin line-clamp($numLines : 1, $lineHeight: 1.412) {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: block;
  /* autoprefixer: off */
  display: -webkit-box;
  -webkit-line-clamp: $numLines;
  -webkit-box-orient: vertical;
  max-height: $numLines * $lineHeight + unquote('em');
}

cela ajoute seulement les points de suspension dans les navigateurs webkit. le reste le coupe.

pkyeck
la source
1
En utilisant MOINS, j'ai dû changer /* autoprefixer: off */pour /*! autoprefixer: off */sinon -webkit-box-orient: vertical;être supprimé après la compilation, ce qui signifie que les points de suspension n'ont jamais été affichés
Nathan
18

Utilisez simplement le serre-ligne pour les navigateurs qui le prennent en charge (la plupart des navigateurs modernes) et retombez sur 1 ligne pour les anciens.

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


    @supports (-webkit-line-clamp: 2) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: initial;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
Nicolas
la source
1
espace blanc: initial; m'a sauvé
James
10

Quel dommage que vous ne puissiez pas le faire fonctionner sur deux lignes! Ce serait génial si l'élément était un bloc d'affichage et avait une hauteur définie sur 2em ou quelque chose, et lorsque le texte débordait, il montrerait des points de suspension!

Pour une doublure simple, vous pouvez utiliser:

.show-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Pour plusieurs lignes, vous pouvez peut-être utiliser un Polyfill tel que jQuery autoellipsis qui est sur github http://pvdspek.github.com/jquery.autoellipsis/

superlogique
la source
Ce plugin est beaucoup trop lourd pour ce qu'il fait. Il a 5 ans. Utilisez plutôt dotdotdotmentionné dans un autre post.
adi518
10

Je ne suis pas un pro JS, mais j'ai trouvé quelques façons de le faire.

Le HTML:

<p id="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum consequat tortor et euismod. Nam commodo consequat libero vel lobortis. Morbi ac nisi at leo vehicula consectetur.</p>

Ensuite, avec jQuery, vous le tronquez à un nombre de caractères spécifique, mais laissez le dernier mot comme ceci:

// Truncate but leave last word
var myTag = $('#truncate').text();
if (myTag.length > 100) {
  var truncated = myTag.trim().substring(0, 100).split(" ").slice(0, -1).join(" ") + "…";
  $('#truncate').text(truncated);
}

Le résultat ressemble à ceci:

Lorem ipsum dolor sit amet, elect adipiscing consectetur. Morbi
elementum conséquat tortor et…

Ou, vous pouvez simplement le tronquer à un nombre de caractères spécifique comme celui-ci:

// Truncate to specific character
var myTag = $('#truncate').text();
if (myTag.length > 15) {
  var truncated = myTag.trim().substring(0, 100) + "…";
  $('#truncate').text(truncated);
}

Le résultat ressemble à ceci:

Lorem ipsum dolor sit amet, elect adipiscing consectetur. Morbi
elementum conséquat tortor et euismod…

J'espère que ça aidera un peu.

Voici le jsFiddle .

Ross Howard-Jones
la source
7

voici un bon exemple en css pur.

.container{
  width: 200px;
}
.block-with-text {
  overflow: hidden;
  position: relative; 
  line-height: 1.2em;
  max-height: 3.6em;
  text-align: justify;  
  margin-right: -1em;
  padding-right: 1em;
}
.block-with-text+.block-with-text{
  margin-top:10px;
}
.block-with-text:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}
.block-with-text:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: white;
}
<div class="container">


<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
</div>

<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>


<div class="block-with-text">
Lorem Ipsum is simply
</div>

</div>

Mirodil
la source
Très bonne solution, juste elle tronque les textes même si la deuxième ligne est trop courte pour être tronquée, mais quand même, bravo
Amin
4

Il s'agit d'un CSS non standard, qui n'est pas couvert dans la version actuelle de CSS (Firefox ne le prend pas en charge). Essayez plutôt d'utiliser JavaScript.

Raptor
la source
4

Mode CSS pur pour découper le texte multiligne avec des points de suspension

Ajustez la hauteur du conteneur de texte, contrôlez la ligne pour la casser par -webkit-line-clamp: 2;

.block-ellipsis {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 30px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
Anil
la source
3

J'ai rencontré ce problème auparavant, et il n'y a pas de solution CSS pure

C'est pourquoi j'ai développé une petite bibliothèque pour traiter ce problème (entre autres). La bibliothèque fournit des objets pour modéliser et effectuer un rendu de texte au niveau des lettres. Vous pouvez par exemple émuler un débordement de texte: des points de suspension avec une limite arbitraire (pas besoin d'une ligne)

En savoir plus sur http://www.samuelrossille.com/home/jstext.html pour une capture d'écran, un didacticiel et un lien de téléchargement.

Samuel Rossille
la source
3

Si quelqu'un essaie de faire fonctionner le line-clamp dans la flexbox , c'est un peu plus difficile - surtout une fois que vous testez la torture avec des mots très longs. Les seules différences réelles dans cet extrait de code sont min-width: 0;dans l'élément flexible contenant du texte tronqué et word-wrap: break-word;. Un chapeau à https://css-tricks.com/flexbox-truncated-text/ pour la perspicacité. Avis de non-responsabilité: ce n'est encore webkit que pour autant que je sache.

.flex-parent {
  display: flex;
}

.short-and-fixed {
  width: 30px;
  height: 30px;
  background: lightgreen;
}

.long-and-truncated {
  margin: 0 20px;
  flex: 1;
  min-width: 0;/* Important for long words! */
}

.long-and-truncated span {
  display: inline;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-wrap: break-word;/* Important for long words! */
}
<div class="flex-parent">
  <div class="flex-child short-and-fixed">
  </div>
  <div class="flex-child long-and-truncated">
    <span>asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</span>
  </div>
  <div class="flex-child short-and-fixed">
  </div>
</div>

http://codepen.io/AlgeoMA/pen/JNvJdx (version codepen)

AlexMA
la source
1

Toutes les réponses ici sont fausses, il leur manque une pièce importante, la hauteur

.container{
    width:200px;
    height:600px;
    background:red
}
.title {
        overflow: hidden;
        line-height: 20px;
        height: 40px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
<div class="container">
    <div class="title">this is a long text you cant cut it in half</div>
</div>
kiwi en colère
la source
0

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

@-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>

Defims
la source
-1

Aucun moyen vraiment simple de le faire. Utilisez la bibliothèque Clamp.js .

$clamp(myHeader, {clamp: 3});
S.Galarneau
la source
-6

J'ai trouvé une solution, mais vous devez connaître une longueur approximative des caractères qui s'adaptera à votre zone de texte, puis joignez un ... à l'espace précédent.

La façon dont je l'ai fait est de:

  1. supposez une longueur approximative des caractères (dans ce cas 200) et passez à une fonction avec votre texte
  2. divisez les espaces pour avoir une longue chaîne
  3. utilisez jQuery pour obtenir le premier espace "" après la longueur de votre caractère
  4. rejoindre les autres ...

code:

truncate = function(description){
        return description.split('').slice(0, description.lastIndexOf(" ",200)).join('') + "...";           
}

voici un violon - http://jsfiddle.net/GYsW6/1/

Paul
la source