CSS mehrere Zeilen über Ellipsen hinaus

Beim Webdesign ist es oft notwendig, mehrzeiligen Text anzuzeigen. Wenn der Textinhalt jedoch zu lang ist, überschreitet er die voreingestellte Breitenbeschränkung, was zu einem unübersichtlichen Layout führt. Um diese Situation zu vermeiden, müssen wir den überflüssigen Text weglassen und die Ellipsen anzeigen, um die Gesamtästhetik und das Benutzererlebnis zu verbessern. Tatsächlich ist es sehr einfach, CSS-Stile zu verwenden, um diesen Effekt zu erzielen. Als Nächstes stellen wir einige häufig verwendete Methoden vor.

Methode 1: Einzeilige zentrierte Auslassungspunkte

Diese Methode ist die einfachste und eignet sich für Textinhalte mit nur einer Zeile. Wir können dies durch die folgenden zwei Zeilen CSS-Code erreichen:

overflow: hidden;
text-overflow: ellipsis; 

Überlauf dient zum Ausblenden des Texts, der die Breitenbeschränkung überschreitet, Textüberlauf ist die Möglichkeit, ihn auszudrücken, nachdem er die Breitenbeschränkung überschreitet, und hier werden Auslassungspunkte verwendet . Allerdings gibt es bei diesen beiden Codezeilen eine Einschränkung, die nur für einzeilige Auslassungen gilt. Wenn der Text mehrere Zeilen hat, müssen wir andere Methoden verwenden.

Methode 2: Auslassungspunkte an beiden Enden mehrerer Zeilen ausrichten

Diese Methode ermöglicht mehrere Textzeilen und am Ende des letzten Wortes jeder Textzeile werden Auslassungspunkte angezeigt. Der Schlüssel hier ist, display: -webkit-box; zu verwenden, um den Textcontainer in eine Flexbox umzuwandeln:

.box {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; // 限制显示的行数
}

Unter anderem bedeutet -webkit-line-clamp, die maximale Anzahl von Zeilen für die Textanzeige zu begrenzen. Wenn Sie mehr Zeilen anzeigen möchten, ändern Sie einfach die Zahl in eine größere Zahl.

Der Nachteil dieser Methode besteht darin, dass sie nur von Browsern verwendet werden kann, die den Webkit-Kernel unterstützen, sodass besonderes Augenmerk auf die Kompatibilität gelegt werden muss.

Methode 3: Mehrzeilige Auslassungspunkte + Mauszeiger, um den vollständigen Text anzuzeigen

Diese Methode ähnelt der Schaltfläche „Volltext lesen“ nur, wenn der Benutzer mit dem Mauszeiger über den Text fährt. Zuerst müssen wir den Text auf den Höhenbereich des Containers beschränken und den überschüssigen Text ausblenden. Anschließend können wir das Anzeigen und Ausblenden von Text über die JavaScript-Ereignisse „mouseenter“ und „mouseleave“ steuern.

Für den CSS-Teil können wir ihn durch den folgenden Code implementieren:

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3; //限定显示行数
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.show-text {
  display: block;
  cursor: pointer;
}

Verwenden Sie js, um die Ereignisbindung und das Anzeigen und Ausblenden von Text zu implementieren:

var text = document.querySelector('.text');
var textHeight = window.getComputedStyle(text).height;

if(parseInt(textHeight) < text.scrollHeight) {
  text.classList.add('show-text');
  text.addEventListener('mouseenter', function() {
    text.classList.remove('text');
  });
  text.addEventListener('mouseleave', function() {
    text.classList.add('text');
  });
}

Diese Methode kann das Anzeigen und Ausblenden von Text besser steuern und die Benutzererfahrung verbessern , aber es erfordert mehr Codierungszeit und die Implementierung dynamischer Effekte.

Methode 4: Filter in Vue.js verwenden

Vue.js ist ein Front-End-Framework, das eine bidirektionale Bindung von Daten und eine dynamische Reaktion der Seite erreichen kann. In Vue.js können wir durch Filter den Effekt mehrzeiliger Ellipsen erzielen. Wie im folgenden Code gezeigt:

<p v-html="text | multilineEllipsis(3)"></p>

Darunter wird die v-html-Direktive zum Rendern von Textinhalten und das Pipeline-Symbol „|“ zum Koordinieren von Filtern und Ausdrücken verwendet. Der Filter kann in der Vue.js-Instanz definiert werden, wie unten gezeigt:

Vue.filter('multilineEllipsis', function(text, lines) {
  var stopwords = ['the', 'in', 'on', 'at', 'is', 'are', 'to', 'and'];
  var reg = new RegExp(`(?:(?<=(^|(.{2,}?\W)))[${stopwords.join('')}])?(?<line>(.|\n){1,20}(?=(.|\n){0,20}[\W]$))`, 'g');
  var len = 0;
  var result = '';
  var lineCount = 0;

  while(len <= text.length && lineCount < lines) {
    var match = reg.exec(text.slice(len));
    if(match && match.groups.line) {
      result += match.groups.line;
      len += match[0].length;
    } else {
      break;
    }

    if(len < text.length) {
      var nextchar = text[len];
      if(nextchar !== ' ' && nextchar !== '
' && nextchar !== '') {
        result += '...';
        break;
      }
    }
    lineCount++;
  }

  if(len < text.length) {
    result += '...';
  }

  return result;
});

Dieser Filter ist komplexer. Er führt einen regelmäßigen Abgleich im Text durch, konvertiert jede Textzeile, die die Anforderungen erfüllt, in den entsprechenden HTML-Code und behält ihn bei die Ellipsen. Mit diesem Filter können Sie auch reguläre Ausdrücke formulieren, indem Sie auf eine Liste gebräuchlicher englischer Wörter verweisen und so die Qualität der Textanzeige verbessern.

Ende

Die oben genannten Methoden zur Implementierung von mehrzeiligen CSS-Ellipsen können entsprechend den spezifischen Anforderungen ausgewählt werden. Unter diesen ist die Implementierung mithilfe von Vue.js-Filtern relativ neu und beliebt und wird von immer mehr Entwicklern übernommen. Unabhängig davon, welche Methode verwendet wird, muss auf Kompatibilität und dynamische Reaktionsfähigkeit geachtet werden, um die Gesamtästhetik der Website zu verbessern und gleichzeitig den Benutzern das beste Erlebnis zu bieten.

Das obige ist der detaillierte Inhalt vonCSS mehrere Zeilen über Ellipsen hinaus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!