Limiter la longueur du texte à n lignes en utilisant CSS

il y a un moyen, mais c'est uniquement webkit. Cependant, lorsque vous combinez cela avec line-height: X; , et max-height: X*N; , il fonctionnera également dans d'autres navigateurs, tout simplement sans ellipses.

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

Démo: http://jsfiddle.net/csYjC/1131 /

ce que vous pouvez faire est le suivant:

.max-lines {
  display: block; /* or inline-block */
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em;
  line-height: 1.8em;
}

où max-height: = line-height: × <number-of-lines> dans em .

autant que je puisse voir, cela ne serait possible qu'en utilisant height: (some em value); overflow: hidden et même alors il n'aurait pas la fantaisie ... à la fin.

si ce n'est pas une option, je pense que c'est impossible sans un pré-traitement côté serveur (difficile car le flux de texte est impossible à prédire de façon fiable) ou jQuery (possible mais probablement compliqué).

Travail de la Croix-navigateur Solution

ce problème nous tourmente tous depuis des années...

pour aider dans tous les cas, j'ai présenté l'approche CSS seulement, et une approche jQuery dans le cas où les mises en garde css sont un problème.

Voici une solution CSS only qui fonctionne en toutes circonstances, avec quelques mises en garde mineures.

les bases sont simple, il cache le débordement de la travée, et fixe la hauteur maximale basée sur la hauteur de la ligne comme suggéré par Eugene Xa.

puis il y a une pseudo classe après le div contenant qui place l'ellipse bien.

mises en garde

cette solution placera toujours l'ellipse, indépendamment du besoin.

si la dernière ligne se termine par une phrase finale, vous finirez avec quatre points....

vous devez être satisfait de l'alignement justifié du texte.

l'ellipse sera à droite du texte, qui peut sembler bâclé.

Code + Extrait De

jsfiddle

.text {
  position: relative;
  font-size: 14px;
  color: black;
  width: 250px; /* Could be anything you like. */
}

.text-concat {
  position: relative;
  display: inline-block;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em; /* (Number of lines you want visible) * (line-height) */
  line-height: 1.2em;
  text-align:justify;
}

.text.ellipsis::after {
  content: "...";
  position: absolute;
  right: -12px; 
  bottom: 4px;
}

/* Right and bottom for the psudo class are px based on various factors, font-size etc... Tweak for your own needs. */

<div class="text ellipsis">
  <span class="text-concat">
Lorem ipsum dolor sit amet, nibh eleifend cu his, porro fugit mandamus no mea. Sit tale facete voluptatum ea, ad sumo altera scripta per, eius ullum feugait id duo. At nominavi pericula persecuti ius, sea at sonet tincidunt, cu posse facilisis eos. Aliquid philosophia contentiones id eos, per cu atqui option disputationi, no vis nobis vidisse. Eu has mentitum conclusionemque, primis deterruisset est in.

Virtute feugait ei vim. Commune honestatis accommodare pri ex. Ut est civibus accusam, pro principes conceptam ei, et duo case veniam. Partiendo concludaturque at duo. Ei eirmod verear consequuntur pri. Esse malis facilisis ex vix, cu hinc suavitate scriptorem pri.
  </span>
</div>

jQuery Approche

à mon avis c'est la meilleure solution, mais tout le monde ne peut pas utiliser JS. En gros, le jQuery vérifiera tout .élément Texte, et s'il y a plus de caractères que le preset max var, il coupera le reste et ajoutera une ellipse.

il n'y a pas de mises en garde à cette approche, mais cet exemple de code n'est destiné qu'à démontrer l'idée de base - Je ne l'utiliserais pas dans la production sans l'améliorer pour deux raisons:

1) Il va réécrire le html interne de .texte elems. si nécessaire ou non. 2) il ne fait pas de test pour vérifier que le html interne n'a pas imbriqué elems - donc vous comptez beaucoup sur l'auteur pour utiliser le .le texte correctement.

Édité

Merci pour le catch @markzzz

Code & Extrait

jsfiddle

setTimeout(function()
{
	var max = 200;
  var tot, str;
  $('.text').each(function() {
  	str = String($(this).html());
  	tot = str.length;
    str = (tot <= max)
    	? str
      : str.substring(0,(max + 1))+"...";
    $(this).html(str);
  });
},500); // Delayed for example only.

.text {
  position: relative;
  font-size: 14px;
  color: black;
  font-family: sans-serif;
  width: 250px; /* Could be anything you like. */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="text">
Old men tend to forget what thought was like in their youth; they forget the quickness of the mental jump, the daring of the youthful intuition, the agility of the fresh insight. They become accustomed to the more plodding varieties of reason, and because this is more than made up by the accumulation of experience, old men think themselves wiser than the young.
</p>

<p class="text">
Old men tend to forget what thought was like in their youth;
</p>
 <!-- Working Cross-browser Solution

This is a jQuery approach to limiting a body of text to n words, and end with an ellipsis -->

la solution de ce fil est d'utiliser le plugin jquery dotdot . Pas une solution CSS, mais il vous donne beaucoup d'options pour les liens "lire plus", redimensionnement dynamique, etc.

Actuellement, vous ne pouvez pas, mais à l'avenir, vous serez en mesure d'utiliser text-overflow:ellipis-lastline . Actuellement, il est disponible avec le fournisseur préfixe Opera 10.60+: exemple

après le cours de CSS m'a aidé à obtenir deux ellipses de ligne.

  .two-line-ellipsis {
        padding-left:2vw;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 325px;
        line-height: 25px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding-top: 15px;
    }

j'ai une solution qui fonctionne bien mais à la place une ellipse il utilise un gradient. Cela fonctionne lorsque vous avez du texte dynamique de sorte que vous ne savez pas s'il sera assez long pour avoir besoin d'une ellipse. Les avantages sont que vous ne devez pas faire de calculs JavaScript et il fonctionne pour les conteneurs de largeur variable, y compris les cellules de table et est cross-browser. Il utilise un couple de divs supplémentaires, mais il est très facile à mettre en œuvre.

Balisage:

<td>
    <div class="fade-container" title="content goes here">
         content goes here
         <div class="fade">
    </div>
</td>

CSS:

.fade-container { /*two lines*/
    overflow: hidden;
    position: relative;
    line-height: 18px; 
    /* height must be a multiple of line-height for how many rows you want to show (height = line-height x rows) */
    height: 36px;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
}

.fade {
        position: absolute;
        top: 50%;/* only cover the last line. If this wrapped to 3 lines it would be 33% or the height of one line */
        right: 0;
        bottom: 0;
        width: 26px;
        background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}

article de blog: http://salzerdesign.com/blog/?p=453

exemple de page: http://salzerdesign.com/test/fade.html

j'aime vraiment line-clamp, mais pas de support pour firefox encore.. donc je vais avec un calc mathématique et juste cacher le débordement

.body-content.body-overflow-hidden h5 {
    max-height: 62px;/* font-size * line-height * lines-to-show(4 in this case) 63px if you go with jquery */
    overflow: hidden;
}
.body-content h5 {
    font-size: 14px; /* need to know this*/
    line-height:1,1; /*and this*/
}

permet maintenant de dire que vous voulez supprimer et ajouter cette classe via jQuery avec un lien, vous aurez besoin d'avoir un pixel supplémentaire afin que la hauteur maximale il sera 63 px, c'est parce que vous avez besoin de vérifier à chaque fois si la hauteur greatherher que 62px, mais dans le cas de 4 lignes vous obtiendrez un faux vrai, donc un pixel supplémentaire va corriger cela et il ne sera pas créer des problèmes supplémentaires

je vais coller un coffeescript pour ceci juste pour être un exemple, utilise un couple de liens qui sont cachés par défaut, avec les classes read-more et read-less, il va supprimer ceux que le débordement n'est pas nécessaire et supprimer le corps-classes overflow

jQuery ->

    $('.read-more').each ->
        if $(this).parent().find("h5").height() < 63
             $(this).parent().removeClass("body-overflow-hidden").find(".read-less").remove()
             $(this).remove()
        else
            $(this).show()

    $('.read-more').click (event) ->
        event.preventDefault()
        $(this).parent().removeClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-less').show()

    $('.read-less').click (event) ->
        event.preventDefault()
        $(this).parent().addClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-more').show()

code Exemple de base, apprendre à coder est facile. Cochez les commentaires CSS de Style.

table tr {
  display: flex;
}
table tr td {
  /* start */
  display: inline-block; /* <- Prevent <tr> in a display css */
  text-overflow: ellipsis;
  white-space: nowrap;
  /* end */
  padding: 10px;
  width: 150px; /* Space size limit */
  border: 1px solid black;
  overflow: hidden;
}

<table>
  <tbody>
    <tr>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas erat ut luctus posuere. Praesent et commodo eros. Vestibulum eu nisl vel dui ultrices ultricies vel in tellus.
      </td>
      <td>
        Praesent vitae tempus nulla. Donec vel porta velit. Fusce mattis enim ex. Mauris eu malesuada ante. Aenean id aliquet leo, nec ultricies tortor. Curabitur non mollis elit. Morbi euismod ante sit amet iaculis pharetra. Mauris id ultricies urna. Cras ut
        nisi dolor. Curabitur tellus erat, condimentum ac enim non, varius tempor nisi. Donec dapibus justo odio, sed consequat eros feugiat feugiat.
      </td>
      <td>
        Pellentesque mattis consequat ipsum sed sagittis. Pellentesque consectetur vestibulum odio, aliquet auctor ex elementum sed. Suspendisse porta massa nisl, quis molestie libero auctor varius. Ut erat nibh, fringilla sed ligula ut, iaculis interdum sapien.
        Ut dictum massa mi, sit amet interdum mi bibendum nec.
      </td>
    </tr>
    <tr>
      <td>
        Sed viverra massa laoreet urna dictum, et fringilla dui molestie. Duis porta, ligula ut venenatis pretium, sapien tellus blandit felis, non lobortis orci erat sed justo. Vivamus hendrerit, quam at iaculis vehicula, nibh nisi fermentum augue, at sagittis
        nibh dui et erat.
      </td>
      <td>
        Nullam mollis nulla justo, nec tincidunt urna suscipit non. Donec malesuada dolor non dolor interdum, id ultrices neque egestas. Integer ac ante sed magna gravida dapibus sit amet eu diam. Etiam dignissim est sit amet libero dapibus, in consequat est
        aliquet.
      </td>
      <td>
        Vestibulum mollis, dui eu eleifend tincidunt, erat eros tempor nibh, non finibus quam ante nec felis. Fusce egestas, orci in volutpat imperdiet, risus velit convallis sapien, sodales lobortis risus lectus id leo. Nunc vel diam vel nunc congue finibus.
        Vestibulum turpis tortor, pharetra sed ipsum eu, tincidunt imperdiet lorem. Donec rutrum purus at tincidunt sagittis. Quisque nec hendrerit justo.
      </td>
    </tr>
  </tbody>
</table>

j'ai cherché partout pour cela, mais alors je me rends compte, Merde mon site utilise php!!! Pourquoi ne pas utiliser la fonction trim sur l'entrée de texte et jouer avec la longueur max....

Voici une solution possible pour ceux qui utilisent php: http://ideone.com/PsTaI

<?php
$s = "In the beginning there was a tree.";
$max_length = 10;

if (strlen($s) > $max_length)
{
   $offset = ($max_length - 3) - strlen($s);
   $s = substr($s, 0, strrpos($s, ' ', $offset)) . '...';
}

echo $s;
?>