So verwenden Sie Ellipsen, um überschüssigen Inhalt in Javascript zu ersetzen

Bei der Seitenentwicklung überschreitet der Textinhalt häufig das Limit. Zu diesem Zeitpunkt verwenden wir normalerweise Ellipsen, um den überschüssigen Inhalt zu ersetzen und die Seite schön und prägnant zu halten. In JavaScript können wir einige Methoden verwenden, um diese Funktionalität zu erreichen.

1. CSS-Methode

CSS verfügt bereits über das Textüberlauf-Attribut, mit dem gesteuert wird, wie mit Textüberläufen in einem Element umgegangen wird. Dieses Attribut hat drei Werte:

1. clip: Schneiden Sie den überschüssigen Teil ab.
2. Ellipse: Verwenden Sie Ellipsen, um überschüssige Teile zu ersetzen.
3. unscharf: Unscharf.

Für die Verwendung des Textüberlaufattributs muss das Überlaufattribut auf „Ausgeblendet“ oder „Bildlauf“ gesetzt werden. Gleichzeitig muss das White-Space-Attribut auf nowrap gesetzt werden, um ein Umbrechen des Textes zu verhindern.

Zum Beispiel:

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

Verwenden Sie diesen Klassennamen in HTML, um den Auslassungseffekt für den überschüssigen Text zu erzielen.

2. JavaScript-Methode

Wenn der Ellipseneffekt nicht durch CSS erreicht werden kann, kann JavaScript verwendet werden, um ihn zu erreichen. Hier sind einige Implementierungsmethoden:

1. Verwendung der substring()-Methode

Die substring()-Methode in JavaScript wird verwendet, um einen Teil eines Strings abzurufen. Mit dieser Methode können Sie eine Zeichenfolge abschneiden und am Ende Auslassungspunkte hinzufügen.

function truncateText(text, length) {
  var truncated = text.substring(0, length);
  return truncated + '...';
}

// 使用方法
var text = '这是一段超出了限定长度的文本。';
var truncatedText = truncateText(text, 10);

console.log(truncatedText); // "这是一段超出了限定长度的..."

Das Problem bei dieser Methode besteht darin, dass, wenn die Textlänge kleiner als die Grenzlänge ist, auch Ellipsen hinzugefügt werden.

2. Verwenden Sie die Methode „slice()“

Ähnlich wie die Methode „substring()“ kann auch die Methode „slice()“ einen Teil des Strings abfangen. Der Unterschied besteht darin, dass die Methode „slice()“ negative Zahlen als Parameter akzeptieren kann, was bedeutet, dass am Ende abgeschnitten wird.

function truncateText(text, length) {
  var truncated = text.slice(0, length);
  if (text.length > length) {
    truncated += '...';
  }
  return truncated;
}

// 使用方法
var text = '这是一段超出了限定长度的文本。';
var truncatedText = truncateText(text, 10);

console.log(truncatedText); // "这是一段超出了限定长度的..."

Verwenden Sie die Methode „slice()“, um das Problem des Hinzufügens von Auslassungspunkten zu vermeiden, wenn die Zeichenfolgenlänge kleiner als die begrenzte Länge ist.

3. Verwenden Sie die Methoden „split()“ und „join()“

Sie können zunächst die Textzeichenfolge in ein Array konvertieren und dann die Methode „join()“ verwenden, um die ersten n Array-Elemente zu einer Zeichenfolge zusammenzuführen. Fügen Sie abschließend am Ende der Zeichenfolge Auslassungspunkte hinzu.

function truncateText(text, length) {
  var words = text.split(' ');
  var truncatedWords = words.slice(0, length);
  if (words.length > length) {
    truncatedWords.push('...');
  }
  return truncatedWords.join(' ');
}

// 使用方法
var text = '这是一段超出了限定长度的文本。';
var truncatedText = truncateText(text, 5);

console.log(truncatedText); // "这是一段超出了限定长度的文本。"

Das Problem bei dieser Methode besteht darin, dass sie einige Sonderzeichen wie Zeilenumbrüche oder Tabulatoren nicht verarbeiten kann.

Zusammenfassung

Mit der Textüberlaufeigenschaft von CSS kann der Text-Auslassungseffekt leicht erzielt werden, für einige Sonderfälle ist dies jedoch möglicherweise nicht geeignet. Um den Ellipseneffekt in JavaScript zu implementieren, müssen Sie je nach Situation eine geeignete Methode auswählen. In jedem Fall müssen entsprechende Anpassungen und Optimierungen basierend auf den tatsächlichen Bedürfnissen vorgenommen werden.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Ellipsen, um überschüssigen Inhalt in Javascript zu ersetzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!