Juste une petite idée de base.

je testais avec le markup suivant:

<div id="fos">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit. Nullam venenatis, elit in suscipit imperdiet, orci purus posuere mauris, quis adipiscing ipsum urna ac quam.</p>  
</div>

et CSS:

#fos { width: 300px; height: 190px; overflow: hidden; }
#fos p { padding: 10px; margin: 0; }

L'application de ce jQuery permettra d'obtenir le résultat souhaité:

var $p = $('#fos p');
var divh = $('#fos').height();
while ($p.outerHeight() > divh) {
    $p.text(function (index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}

Il essaie à plusieurs reprises de supprimer le dernier mot du texte jusqu'à ce qu'il atteigne la taille souhaitée. En raison du débordement: caché; le processus reste invisible et même avec JS éteint le résultat reste visuellement correct " (sans le "..."bien sûr).

si vous combinez ceci avec une troncature sensible du côté du serveur (qui ne laisse qu'un petit overhead) alors il fonctionnera plus rapidement :).

Encore une fois, ce n'est pas une solution complète, juste une idée.

mise à JOUR: , a Ajouté un jsFiddle Démo .

essayez le jQuery.dotdotdot plugin.

$(".ellipsis").dotdotdot();

bibliothèques Javascript pour la "ligne de serrage"

noter que le" serrage de ligne "est également appelé" ellipse sur bloc de multilignes "ou"ellipse verticale".

github.com/BeSite/jQuery.dotdotdot

• Pros: Licence MIT, 2,5 Ko (minifiés et gzippé), pas de grosse activité sur les pensions de titres, mais pas mauvais non plus
• Cons: dépendance de jQuery
• my 2 cents: /q/how-to-implement-read-more-and-read-less-with-dotdotdot-4282/"/q/how-to-expand-truncated-text-onclick-by-using-dotdotdot-10084/">/q/how-to-expand-truncated-text-onclick-by-using-dotdotdot-10084/"http://gist.github.com/chiragparekh/c7e33dc749ed25544bde"rel="nofollow noreferrer">gist.github.com/chiragparekh/c7e33dc749ed25544bde

github.com/josephschmitt/Clamp.js

• Cons: code repo à peine active
• informatif reusablebits.com/post/2980974411/clamp-js-v0-2-explanations-and-performance

voici quelques autres que je n'ai pas encore étudiés:

• github.com/ftlabs/ftellipsis
• github.com/micjamking/Succinct
• github.com/pvdspek/jquery.autoellipsis et pvdspek.github.io / jquery.autoellipsis
• github.com/rviscomi/trunk8
• github.com/dobiatowski/jQuery.FastEllipsis
• github.com/theproductguy/ThreeDots
• github.com/tbasse/jquery-truncate
• github.com/kbwood/more

CSS solutions pour la ligne de serrage

il y a des solutions CSS, mais les plus simples utilisent -webkit-line-clamp qui a une mauvaise prise en charge du navigateur . Voir la démo live sur jsfiddle.net/AdrienBe/jthu55v7/

beaucoup de gens ont fait de grands efforts pour que cela se produise en utilisant seulement CSS. Voir les articles et les questions à ce sujet:

• css-tricks.com/line-clampin : article de 5 étoiles sur la ligne camplin
• mobify.com/blog/multiline-ellipsis-in-pure-css : CSS only
• cssmojo.com/line-clamp_for_non_webkit-based_browsers/ : "imiter" -webkit-ligne-clamp non les navigateurs webkit
• Avec CSS, utiliser "..."pour débordé bloc de multi-lignes
• Croix navigateurs mult-lignes de débordement de texte avec des points de suspension ajoutée au sein d'une largeur&hauteur fixe div?
• comment afficher seulement les premières lignes d'un div (serrage)?
• jquery lignes limites dans un paragraphe et appliquer trois périodes jusqu'à la fin
• limiter la longueur du texte à n lignes en utilisant CSS

ce que je recommanderais

Keep it simple. Sauf si vous avez beaucoup de temps à consacrer à cette fonctionnalité, optez pour la solution la plus simple et testée: simple CSS ou une bibliothèque javascript bien testée.

Aller pour quelque chose fantaisie/complexe/hautement personnalisé et vous allez payer le prix bas de la route.

Ce que les autres font

ayant un fondu comme Airbnb fait pourrait être une bonne solution. Il s'agit probablement de CSS de base couplé à jQuery de base. En fait, il semble très similaire à cette solution sur CSSTricks

Oh, et si vous cherchez des inspirations de conception:

• smashingmagazine.com/2009/07/designing-read-more-and-continue-reading-links/ , à partir de 2009...
• Dribbble a probablement des dessins intéressants...Je n'ai pas pu trouver un moyen de les rassembler (par recherche ou tags), n'hésitez pas à partager un lien pertinent

il n'y a pas de telle fonctionnalité en HTML, et c'est très frustrant.

j'ai développé une bibliothèque pour faire face à cela.

• Multiline text-overflow: ellipsis
• texte multiligne avec des technologies qui ne le supportent pas: SVG, Canvas par exemple
• ont exactement les mêmes sauts de ligne dans votre texte SVG, dans votre rendu HTML, et dans votre PDF d'exportation par exemple

Check out my site pour screenshot, tutorial, et dowload link.

solution Pure js basée sur la solution de bažmegakapa, et un peu de nettoyage pour tenir compte des personnes qui essaient de donner une hauteur/Hauteur maxi qui est inférieure à la hauteur de l'élément de lineHeight:

  var truncationEl = document.getElementById('truncation-test');
  function calculateTruncation(el) {
    var text;
    while(el.clientHeight < el.scrollHeight) {
      text = el.innerHTML.trim();
      if(text.split(' ').length <= 1) {
        break;
      }
      el.innerHTML = text.replace(/\W*\s(\S)*$/, '...');
    }
  }

  calculateTruncation(truncationEl);

j'ai une solution qui fonctionne bien mais à la place une ellipse il utilise un gradient. 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. Il utilise un couple de divs supplémentaires, mais il est très facile à mettre en œuvre.

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

Edit: Désolé, Je ne savais pas que le lien n'était pas suffisant. La solution est de mettre un div autour du texte, et le style de la div pour contrôler le débordement. À l'intérieur de la div mettre une autre div avec un gradient "fondu" qui peut être fait en utilisant CSS ou une image (pour la vieille IE). Le gradient va de la couleur transparente à la couleur de fond de la cellule de la table et est un peu plus large qu'une ellipse. Si le texte est long et déborde, il passe sous la div "fade" et semble "fané". Si le texte est court, le fondu est invisible et il n'y a donc pas de problème. Les deux conteneurs peuvent être ajustés pour laisser un ou plusieurs les lignes s'affichent en définissant la hauteur du conteneur comme un multiple de la hauteur de la ligne de texte. La div "fade" ne peut être positionnée que pour couvrir la dernière ligne.

Voici une façon pure CSS pour accomplir ceci: http://www.mobify.com/blog/multiline-ellipsis-in-pure-css /

voici un résumé:

<html>
<head>
<style>
    html, body, 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: "026";  

        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); }
</style>
</head>
<body>
    <div class="ellipsis">
        <div>
            <p>Call me Ishmael.....</p> 
        </div>
    </div>
</body>
</html>

pas une réponse exacte à la question, mais je suis tombé sur cette page en essayant de faire très similaire, mais en voulant ajouter un lien vers" Voir plus " plutôt que juste une ellipse simple. Il s'agit d'une fonction jQuery qui va ajouter un lien "plus" vers un texte qui déborde un conteneur. Personnellement, je l'utilise avec Bootstrap, mais bien sûr, il fonctionnera sans.

pour utiliser, Mettez votre texte dans un conteneur comme

<div class="more-less">
    <div class="more-block">
        <p>The long text goes in here</p>
    </div>
</div>

lorsque la fonction jQuery suivante est ajoutée, n'importe laquelle des DIV qui sont plus grandes que la valeur d'ajustement sera tronquée et aura un lien "Plus" ajouté.

$(function(){
    var adjustheight = 60;
    var moreText = '+ More';
    var lessText = '- Less';
    $(".more-less .more-block").each(function(){
        if ($(this).height() > adjustheight){
            $(this).css('height', adjustheight).css('overflow', 'hidden');
            $(this).parent(".more-less").append
                ('<a style="cursor:pointer" class="adjust">' + moreText + '</a>');
        }
    });
    $(".adjust").click(function() {
        if ($(this).prev().css('overflow') == 'hidden')
        {
            $(this).prev().css('height', 'auto').css('overflow', 'visible');
            $(this).text(lessText);
        }
        else {
            $(this).prev().css('height', adjustheight).css('overflow', 'hidden');
            $(this).text(moreText);
        }
    });
});

basé sur ceci, mais mis à jour: http://shakenandstirredweb.com/240/jquery-moreless-text

mentionnés dotdotdot plugin jQuery travail agréable angulaire:

(function (angular) {
angular.module('app')
    .directive('appEllipsis', [
        "$log", "$timeout", function ($log, $timeout) {
            return {
                restrict: 'A',
                scope: false,
                link: function (scope, element, attrs) {

                    // let the angular data binding run first
                    $timeout(function() {
                        element.dotdotdot({
                            watch: "window"
                        });
                    });
                }
            }

        }
    ]);
})(window.angular);

la majoration correspondante serait:

<p app-ellipsis>{{ selectedItem.Description }}</p>

Voici une solution JavaScript vanille que vous pouvez utiliser dans une pincée:

// @param 1 = element containing text to truncate
// @param 2 = the maximum number of lines to show
function limitLines(el, nLines) {
  var nHeight,
    el2 = el.cloneNode(true);
  // Create clone to determine line height
  el2.style.position = 'absolute';
  el2.style.top = '0';
  el2.style.width = '10%';
  el2.style.overflow = 'hidden';
  el2.style.visibility = 'hidden';
  el2.style.whiteSpace = 'nowrap';
  el.parentNode.appendChild(el2);
  nHeight = (el2.clientHeight+2)*nLines; // Add 2 pixels of slack
  // Clean up
  el.parentNode.removeChild(el2);
  el2 = null;
  // Truncate until desired nLines reached
  if (el.clientHeight > nHeight) {
    var i = 0,
      imax = nLines * 35;
    while (el.clientHeight > nHeight) {
      el.innerHTML = el.textContent.slice(0, -2) + '…';
      ++i;
      // Prevent infinite loop in "print" media query caused by
      // Bootstrap 3 CSS: a[href]:after { content:" (" attr(href) ")"; }
      if (i===imax) break;
    }
  }
}

limitLines(document.getElementById('target'), 7);

#test {
  width: 320px;
  font-size: 18px;
}

<div id="test">
  <p>Paragraph 1</p>
  <p id="target">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Paragraph 3</p>
</div>

vous pouvez jouer avec dans le codepen ci-dessous. Essayez de changer la taille de la police dans le panneau CSS et de faire une édition mineure dans le panneau HTML (par exemple, ajouter un espace supplémentaire quelque part) pour mettre à jour les résultats. Quelle que soit la taille de la police, le paragraphe du milieu doit toujours être tronqué au nombre de lignes du second paramètre. passé à limitLines ().

Codepen: http://codepen.io/thdoan/pen/BoXbEK

EDIT: Est tombé sur raser qui est le plugin JS qui fait la troncature de texte multi-ligne basée sur une max-hauteur donnée vraiment bien. Il utilise la recherche binaire pour trouver le point de rupture optimal. Certainement la peine d'enquêter.

RÉPONSE ORIGINALE:

j'ai dû trouver une solution vanille JS pour ce problème. Dans le cas que j'avais travaillé, j'ai dû adapter un long nom du produit dans la largeur limitée et sur deux lignes; tronquées par des ellipses si nécessaire.

j'ai utilisé des réponses provenant de divers articles de SO pour cuisiner quelque chose qui correspond à mes besoins. La stratégie est la suivante:

1. calculer la largeur moyenne des caractères de la variante de police pour la taille de police désirée.
2. calculer la largeur du réservoir
3. calculer le nombre de caractères correspondant à une ligne du conteneur
4. Calculer le nombre de caractères à tronquer la chaîne basé sur le nombre de caractères sur une ligne et le nombre de lignes, le texte est censé enveloppement au.
5. tronquer le texte d'entrée sur la base du calcul précédent (en prenant en compte les caractères supplémentaires ajoutés par ellipsis) et l'ajouter"..."à la fin

exemple de Code:

/**
 * Helper to get the average width of a character in px
 * NOTE: Ensure this is used only AFTER font files are loaded (after page load)
 * @param {DOM element} parentElement 
 * @param {string} fontSize 
 */
function getAverageCharacterWidth(parentElement, fontSize) {
    var textSample = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()";
    parentElement = parentElement || document.body;
    fontSize = fontSize || "1rem";
    var div = document.createElement('div');
    div.style.width = "auto";
    div.style.height = "auto";
    div.style.fontSize = fontSize;
    div.style.whiteSpace = "nowrap";
    div.style.position = "absolute";
    div.innerHTML = textSample;
    parentElement.appendChild(div);

    var pixels = Math.ceil((div.clientWidth + 1) / textSample.length);
    parentElement.removeChild(div);
    return pixels;
}

/**
 * Helper to truncate text to fit into a given width over a specified number of lines
 * @param {string} text Text to truncate
 * @param {string} oneChar Average width of one character in px
 * @param {number} pxWidth Width of the container (adjusted for padding)
 * @param {number} lineCount Number of lines to span over
 * @param {number} pad Adjust this to ensure optimum fit in containers. Use a negative value to Increase length of truncation, positive values to decrease it.
 */
function truncateTextForDisplay(text, oneChar, pxWidth, lineCount, pad) {
    var ellipsisPadding = isNaN(pad) ? 0 : pad;
    var charsPerLine = Math.floor(pxWidth / oneChar);
    var allowedCount = (charsPerLine * (lineCount)) - ellipsisPadding;
    return text.substr(0, allowedCount) + "...";
}


//SAMPLE USAGE:
var rawContainer = document.getElementById("raw");
var clipContainer1 = document.getElementById("clip-container-1");
var clipContainer2 = document.getElementById("clip-container-2");

//Get the text to be truncated
var text=rawContainer.innerHTML;

//Find the average width of a character
//Note: Ideally, call getAverageCharacterWidth only once and reuse the value for the same font and font size as this is an expensive DOM operation
var oneChar = getAverageCharacterWidth();

//Get the container width
var pxWidth = clipContainer1.clientWidth;

//Number of lines to span over
var lineCount = 2;

//Truncate without padding
clipContainer1.innerHTML = truncateTextForDisplay(text, oneChar, pxWidth, lineCount);

//Truncate with negative padding value to adjust for particular font and font size
clipContainer2.innerHTML = truncateTextForDisplay(text, oneChar, pxWidth, lineCount,-10);

.container{
  display: inline-block;
  width: 200px;
  overflow: hidden;
  height: auto;
  border: 1px dotted black;
  padding: 10px;
  }

<h4>Untruncated</h4>
<div id="raw" class="container">
This is super long text which needs to be clipped to the correct length with ellipsis spanning over two lines
</div>
<h4>Truncated</h4>
<div id="clip-container-1" class="container">
</div>
<h4>Truncated with Padding Tweak</h4>
<div id="clip-container-2" class="container">
</div>

PS:

1. si la troncature doit être sur une seule ligne, la méthode CSS pure d'utilisation de texte-overflow: ellipsis is neater
Les polices de caractères
2. qui n'ont pas de largeur fixe peuvent causer la troncature trop tôt ou trop tard (car les différents caractères ont des largeurs différentes). L'utilisation du paramètre pad permet d'atténuer ce problème dans certains cas, mais ne sera pas infaillible:)
3. ajoutera dans les liens et les références aux billets originaux après je reçois ordinateur portable (besoin de l'histoire)

PPS: vient de réaliser que c'est très similaire à l'approche suggérée par @DanMan et @st.jamais de la vie. Consultez les extraits de code pour un exemple d'implémentation.

peut-être assez tard, mais en utilisant SCSS vous pouvez déclarer une fonction comme:

@mixin clamp-text($lines, $line-height) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  line-height: $line-height;
  max-height: unquote('#{$line-height*$lines}em');

  @-moz-document url-prefix() {
    position: relative;
    height: unquote('#{$line-height*$lines}em');

    &::after {
      content: '';
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 30%;
      height: unquote('#{$line-height}em');
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 1) 50%
      );
    }
  }
}

et l'utiliser comme:

.foo {
    @include clamp-text(1, 1.4);
}

qui tronquera le texte à une ligne et sachant qu'il est de 1,4 sa ligne-hauteur. la sortie attendue est chrome à rendre avec ... à la fin et FF avec un peu de fondu frais à la fin

Firefox

Chrome

Vous ne pouvez pas le faire actuellement?) sans police fixe comme Courier. Avec une police à Largeur fixe, chaque lettre occupe le même espace horizontal, de sorte que vous pouvez probablement compter les lettres et multiplier le résultat avec la taille actuelle de la police dans ems ou exs. Ensuite, vous devez juste tester combien de lettres s'inscrivent sur une ligne, et puis la briser.

alternativement, pour non-fixe-avec des polices, vous pourriez être en mesure de créer un mapping pour tous les caractères possibles (comme i = 2px, m = 5px) et ensuite faire le calcul. Beaucoup de travail moche cependant.

pour développer la solution de @DanMan: dans le cas où des polices à largeur variable sont utilisées, vous pouvez utiliser une largeur de police moyenne. Ceci a deux problèmes: 1) un texte avec trop de W déborderait et 2) un texte avec trop de I serait tronqué plus tôt.

ou vous pourriez prendre une approche du pire des cas et utiliser la largeur de la lettre" W " (qui je crois est la plus large). Cela élimine le problème 1 ci-dessus, mais intensifie le problème 2.

une approche différente pourrait être: laisser overflow: clip dans le div et ajouter une section ellipsis (peut-être une autre div ou image) avec float: right; position: relative; bottom: 0px; (non testé). L'astuce est de faire apparaître l'image ci-dessus à la fin du texte.

vous ne pouvez également afficher l'image que lorsque vous savez qu'elle va déborder (disons, après environ 100 caractères)

avec ce code il n'y a pas besoin d'un div wrapper supplémentaire si l'élément a sa hauteur limitée par un style max-height.

// Shorten texts in overflowed paragraphs to emulate Operas text-overflow: -o-ellipsis-lastline
$('.ellipsis-lastline').each(function(i, e) {
    var $e = $(e), original_content = $e.text();
    while (e.scrollHeight > e.clientHeight)
        $e.text($e.text().replace(/\W*\w+\W*$/, '…'));
    $e.attr('data-original-content', original_content);
});

aussi il sauve le texte original dans un attribut de données qui peut être affiché en utilisant seulement des styles, par exemple. sur la souris:

.ellipsis-lastline {
    max-height: 5em;
}
.ellipsis-lastline:before {
    content: attr(data-original-content);
    position: absolute;
    display: none;
}
.ellipsis-lastline:hover:before {
    display: block;
}

Pure JS démo (sans jQuery et "tout" en boucle)

quand j'ai cherché la solution de multiline ellipsis problème j'ai été surpris qu'il n'y ait aucun bon sans jQuery. Il existe aussi quelques solutions basées sur la boucle "while", mais je pense qu'elles ne sont pas efficaces et dangereuses en raison de la possibilité d'entrer dans boucle infinie. Alors j'ai écrit ce code:

function ellipsizeTextBox(el) {
  if (el.scrollHeight <= el.offsetHeight) {
    return;
  }

  let wordArray = el.innerHTML.split(' ');
  const wordsLength = wordArray.length;
  let activeWord;
  let activePhrase;
  let isEllipsed = false;

  for (let i = 0; i < wordsLength; i++) {
    if (el.scrollHeight > el.offsetHeight) {
      activeWord = wordArray.pop();
      el.innerHTML = activePhrase = wordArray.join(' ');
    } else {
      break;
    }
  }

  let charsArray = activeWord.split('');
  const charsLength = charsArray.length;

  for (let i = 0; i < charsLength; i++) {
    if (el.scrollHeight > el.offsetHeight) {
      charsArray.pop();
      el.innerHTML = activePhrase + ' ' + charsArray.join('')  + '...';
      isEllipsed = true;
    } else {
      break;
    }
  }

  if (!isEllipsed) {
    activePhrase = el.innerHTML;

    let phraseArr = activePhrase.split('');
    phraseArr = phraseArr.slice(0, phraseArr.length - 3)
    el.innerHTML = phraseArr.join('') + '...';
  }
}

let el = document.getElementById('ellipsed');

ellipsizeTextBox(el);

dans mon scénario, Je ne pouvais pas faire fonctionner l'une des fonctions mentionnées ci-dessus et j'avais aussi besoin de dire à la fonction combien de lignes afficher indépendamment de la taille de la police ou de la taille du conteneur.

j'ai basé ma solution sur l'utilisation de la toile .measureText méthode (qui est un HTML5 fonctionnalité) comme expliqué ici par Domi , de sorte qu'il n'est pas complètement cross-browser.

vous pouvez voir comment cela fonctionne sur ce violon .

C'est le code:

var processTexts = function processTexts($dom) {
    var canvas = processTexts .canvas || (processTexts .canvas = document.createElement("canvas"));

    $dom.find('.block-with-ellipsis').each(function (idx, ctrl) {
        var currentLineAdded = false;
        var $this = $(ctrl);

        var font = $this.css('font-family').split(",")[0]; //This worked for me so far, but it is not always so easy.
        var fontWeight = $(this).css('font-weight');
        var fontSize = $(this).css('font-size');
        var fullFont = fontWeight + " " + fontSize + " " + font;
        // re-use canvas object for better performance
        var context = canvas.getContext("2d");
        context.font = fullFont;

        var widthOfContainer = $this.width();
        var text = $.trim(ctrl.innerHTML);
        var words = text.split(" ");
        var lines = [];
        //Number of lines to span over, this could be calculated/obtained some other way.
        var lineCount = $this.data('line-count');

        var currentLine = words[0];
        var processing = "";

        var isProcessing = true;
        var metrics = context.measureText(text);
        var processingWidth = metrics.width;
        if (processingWidth > widthOfContainer) {
            for (var i = 1; i < words.length && isProcessing; i++) {
                currentLineAdded = false;
                processing = currentLine + " " + words[i];
                metrics = context.measureText(processing);
                processingWidth = metrics.width;
                if (processingWidth <= widthOfContainer) {
                    currentLine = processing;
                } else {
                    if (lines.length < lineCount - 1) {
                        lines.push(currentLine);
                        currentLine = words[i];
                        currentLineAdded = true;
                    } else {
                        processing = currentLine + "...";
                        metrics = context.measureText(processing);
                        processingWidth = metrics.width;
                        if (processingWidth <= widthOfContainer) {
                            currentLine = processing;
                        } else {
                            currentLine = currentLine.slice(0, -3) + "...";
                        }
                        lines.push(currentLine);
                        isProcessing = false;
                        currentLineAdded = true;
                    }
                }
            }
            if (!currentLineAdded)
                lines.push(currentLine);
            ctrl.innerHTML = lines.join(" ");
        }
    });
};

(function () {
    $(document).ready(function () {
        processTexts($(document));
    });
})();

et le HTML pour l'utiliser serait comme ceci:

<div class="block-with-ellipsis" data-line-count="2">
    VERY LONG TEXT THAT I WANT TO BREAK IN LINES. VERY LONG TEXT THAT I WANT TO BREAK IN LINES.
</div>

le code pour obtenir la police-famille est assez simple, et dans mon cas fonctionne, mais pour les scénarios plus complexes, vous pouvez avoir besoin d'utiliser quelque chose le long de ces lignes .

aussi, dans mon cas je suis dire la fonction de combien de lignes à utiliser, mais vous pouvez calculer le nombre de lignes à afficher en fonction de la taille du conteneur et de la police.

ici j'ai fait une autre bibliothèque avec un algorithme plus rapide. Veuillez vérifier:

https://github.com/i-ahmed-biz/fast-ellipsis

à installer à l'aide d'une souffleuse:

bower install fast-ellipsis

à installer en utilisant npm:

bower install fast-ellipsis 

J'espère que vous apprécierez!

solution javascript très simple. Les Divs doivent être appelés F. E.:

.croppedTexts { 
  max-height: 32px;
  overflow: hidden;
}

et JS:

var list = document.body.getElementsByClassName("croppedTexts");
for (var i = 0; i < list.length; i++) {
  cropTextToFit(list[i]);
}

function cropTextToFit (o) {
  var lastIndex;
  var txt = o.innerHTML;
  if (!o.title) o.title = txt;

  while (o.scrollHeight > o.clientHeight) {
    lastIndex = txt.lastIndexOf(" ");
    if (lastIndex == -1) return;
    txt = txt.substring(0, lastIndex);
    o.innerHTML = txt + "…";
  }
}

pas sûr si c'est ce que vous cherchez, il utilise min-hauteur au lieu de la hauteur.

    <div id="content" style="min-height:10px;width:190px;background:lightblue;">
    <?php 
        function truncate($text,$numb) {
            // source: www.kigoobe.com, please keep this if you are using the function
            $text = html_entity_decode($text, ENT_QUOTES);
            if (strlen($text) > $numb) {
                $text = substr($text, 0, $numb);
                $etc = "..."; 
                $text = $text.$etc;
            } 
            $text = htmlentities($text, ENT_QUOTES);
            return $text;
        }
        echo truncate("this is a multi-lines text block, some lines inside the div, while some outside", 63);
    ?>
    </div>

Très simple func fera.

Directive:

  $scope.truncateAlbumName = function (name) {
    if (name.length > 36) {
      return name.slice(0, 34) + "..";
    } else {
      return name;
    }
  };

:

<#p>{{truncateAlbumName(album.name)}}<#/p>