Ich möchte einen Text oder eine Zeile mit einer Ellipse mit JavaScript abschneiden

Question

Ich bin auf der Suche nach einem einfachen Skript, das einen String mit Ellipsen (...) abschneiden kann.

Ich möchte etwas abkürzen wie 'this is a very long string' a 'this is a ve...'

Ich möchte weder CSS noch PHP verwenden.

Answer 1

function truncate(input) {
   if (input.length > 5) {
      return input.substring(0, 5) + '...';
   }
   return input;
};

oder in ES6

const truncate = (input) => input.length > 5 ? `${input.substring(0, 5)}...` : input;

Answer 2

KooiInc hat eine gute Antwort auf diese Frage. Um es zusammenzufassen:

String.prototype.trunc = 
      function(n){
          return this.substr(0,n-1)+(this.length>n?'…':'');
      };

Das können Sie jetzt tun:

var s = 'not very long';
s.trunc(25); //=> not very long
s.trunc(5); //=> not...

---

Und wenn Sie es als Funktion bevorzugen, wie in @AlienLifeForm's Kommentar:

function truncateWithEllipses(text, max) 
{
    return text.substr(0,max-1)+(text.length>max?'…':''); 
}

Die volle Anerkennung geht an KooiInc für diese.

Answer 3

Dadurch wird die Anzahl der Zeilen auf die von Ihnen gewünschte Anzahl begrenzt, und sie ist reaktionsschnell

Eine Idee, die noch niemand vorgeschlagen hat, ist es, die Höhe des Elements zugrunde zu legen und es dann von dort aus zu verkleinern.

Fiedel - https://jsfiddle.net/hutber/u5mtLznf/ <- ES6-Version

Aber im Grunde wollen Sie die Zeilenhöhe des Elements zu erfassen, Schleife durch alle den Text und stoppen, wenn seine auf eine bestimmte Zeilenhöhe:

'use strict';

var linesElement = 3; //it will truncate at 3 lines.
var truncateElement = document.getElementById('truncateme');
var truncateText = truncateElement.textContent;

var getLineHeight = function getLineHeight(element) {
  var lineHeight = window.getComputedStyle(truncateElement)['line-height'];
  if (lineHeight === 'normal') {
    // sucky chrome
    return 1.16 * parseFloat(window.getComputedStyle(truncateElement)['font-size']);
  } else {
    return parseFloat(lineHeight);
  }
};

linesElement.addEventListener('change', function () {
  truncateElement.innerHTML = truncateText;
  var truncateTextParts = truncateText.split(' ');
  var lineHeight = getLineHeight(truncateElement);
  var lines = parseInt(linesElement.value);

  while (lines * lineHeight < truncateElement.clientHeight) {
    console.log(truncateTextParts.length, lines * lineHeight, truncateElement.clientHeight);
    truncateTextParts.pop();
    truncateElement.innerHTML = truncateTextParts.join(' ') + '...';
  }
});

CSS

#truncateme {
   width: auto; This will be completely dynamic to the height of the element, its just restricted by how many lines you want it to clip to
}

Answer 4

Etwa so:

var line = "foo bar lol";
line.substring(0, 5) + '...' // gives "foo b..."

Answer 5

Dadurch wird die Ellipse in die Mitte der Zeile gesetzt:

function truncate( str, max, sep ) {

    // Default to 10 characters
    max = max || 10;

    var len = str.length;
    if(len > max){

        // Default to elipsis
        sep = sep || "...";

        var seplen = sep.length;

        // If seperator is larger than character limit,
        // well then we don't want to just show the seperator,
        // so just show right hand side of the string.
        if(seplen > max) {
            return str.substr(len - max);
        }

        // Half the difference between max and string length.
        // Multiply negative because small minus big.
        // Must account for length of separator too.
        var n = -0.5 * (max - len - seplen);

        // This gives us the centerline.
        var center = len/2;

        var front = str.substr(0, center - n);
        var back = str.substr(len - center + n); // without second arg, will automatically go to end of line.

        return front + sep + back;

    }

    return str;
}

console.log( truncate("123456789abcde") ); // 123...bcde (using built-in defaults) 
console.log( truncate("123456789abcde", 8) ); // 12...cde (max of 8 characters) 
console.log( truncate("123456789abcde", 12, "_") ); // 12345_9abcde (customize the separator) 

Zum Beispiel:

1234567890 --> 1234...8910

Und:

A really long string --> A real...string

Nicht perfekt, aber funktionell. Verzeihen Sie die übermäßige Kommentierung... für die Noobs.