ellipse css sur la deuxième 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 ont déjà répondu, une solution CSS pure n'existe pas. Il y a un jQuery plugin qui est très facile à utiliser, il est appelé dotdot . Il utilise la largeur et la hauteur du conteneur pour calculer s'il a besoin de tronquer et d'ajouter des ellipses.

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

voici un jsFiddle .

j'ai trouvé que la réponse de Skeep n'était pas suffisante et avait besoin d'un overflow style too:

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

quel dommage que vous ne puissiez pas le faire fonctionner sur deux lignes! Serait génial si l'élément était bloc d'affichage et avait une hauteur réglée à 2em ou quelque chose, et quand le texte débordé il afficherait une ellipse!

pour une doublure simple, vous pouvez utiliser:

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

pour plusieurs lignes peut-être que vous pourriez utiliser un Polyfill comme jQuery autoellipsis qui est sur github http://pvdspek.github.com/jquery.autoellipsis /

si quelqu'un utilise SASS/SCSS et trébuche sur cette question - peut-être ce mixin pourrait être d'aide:

@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');
}

ceci ajoute seulement les ellipses dans les navigateurs webkit. reste juste le coupe.

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

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

alors avec jQuery vous tronquez vers le bas à un nombre de caractères spécifiques 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, consectetur adipiscing elit. Morbi

elementum consequat savoir plus et ...

ou, vous pouvez simplement la tronquer à un nombre de caractères spécifiques comme ceci:

// 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, consectetur adipiscing elit. Morbi

elementum consequat savoir plus et euismod...

Espère que ça aide un peu.

voici le jsFiddle .

j'ai utilisé le jQuery-condenser-plugin avant, qui ressemble, il peut faire ce que vous voulez. Si non, il y a différents plugins qui pourraient convenir à vos besoins.

Edit: Fait de vous un démo - notez que j'ai relié le jquery.condenser.js sur la démo qui fait la magie, de sorte que la totalité du crédit à 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 supporte pas). Essayez D'utiliser JavaScript à la place.

ici c'est bon exemple dans 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à rencontré cette question, et il n'y a pas de solution CSS pure

C'est pourquoi j'ai développé une petite bibliothèque pour traiter de cette question (entre autres). La bibliothèque fournit des objets pour modéliser et exécuter le rendu de texte au niveau de la lettre. Vous pouvez par exemple émuler un débordement de texte: ellipse avec une limite arbitraire (pas nécessaire une ligne)

plus d'informations à http://www.samuelrossille.com/home/jstext.html pour screenshot, tutorial, et dowload link.

si quelqu'un essaie de faire fonctionner la pince de la ligne dans la flexbox , c'est un peu plus compliqué-surtout si vous torturez les tests avec des mots très longs. Les seules différences réelles dans cet extrait de code sont min-width: 0; dans l'article flex contenant du texte tronqué, et word-wrap: break-word; . Une pointe de chapeau à https://css-tricks.com/flexbox-truncated-text / for the insight. Disclaimer: pour autant que je sache, c'est toujours webkit.

.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 (codepen version)

il suffit d'utiliser line-clamp pour les navigateurs qui le prennent en charge(les navigateurs les plus modernes) et retomber à 1 ligne pour les plus 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;
    }
  }

un pur css méthode base sur webkit-ligne-clamp, qui travaille 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>

ce n'est pas un moyen facile. Utilisez la pince .js bibliothèque.

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

j'ai trouvé une solution cependant vous devez savoir une longueur de caractère approximatif qui s'adaptera à votre zone de texte, puis rejoindre un ... le précédent de l'espace.

Le chemin que j'ai fait c'est:

1. fonction avec votre texte
2. diviser les espaces de sorte que vous avez une longue chaîne de caractères
3. utilisez jQuery pour obtenir tranche la première "" espace après votre personnage longueur
4. Rejoignez le reste ...

code:

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

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