ellipses css sur la deuxième ligne

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

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.

Cela devrait fonctionner dans les navigateurs webkit :

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

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 .

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;

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.

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

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/

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 .

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>

J'ai déjà utilisé le plugin jQuery-condense , qui semble pouvoir faire ce que vous voulez. Sinon, il existe différents plugins qui pourraient répondre à vos besoins.

Edit: vous a fait une démo - notez que j'ai lié le jquery.condense.js sur la démo qui fait la magie, donc merci à l'auteur de ce plugin :)

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.

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

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.

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)

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>

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>

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

$clamp(myHeader, {clamp: 3});

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/