CSS-Schriftart überschreitet Auslassung

Bei der Webentwicklung überschreiten Textinhalte häufig den Umfang des Containers, was nicht nur die Schönheit der Seite beeinträchtigt, sondern auch das Leseerlebnis des Benutzers verringert. Als Reaktion auf diese Situation bietet CSS eine Lösung, um die Wirkung von Schriftarten über das Auslassen hinaus zu erzielen.

1. Das Grundprinzip der übermäßigen Auslassung von CSS

Übermäßiges Auslassen von Schriftarten bedeutet, dass, wenn der Textinhalt in einem Element den vom Element zugewiesenen Platz überschreitet, der überschüssige Teil entfernt wird Wird verwendet Ellipse (...) zeigt an, dass zur besseren Anzeige von Textinhalten der CSS-Textüberlauf durch die folgenden drei Attribute erreicht wird:

• text-overflow: Wird zur Steuerung des Überlaufs verwendet Wie der Text nach der Breite des Elements wird angezeigt;
• white-space: wird verwendet, um Zeilenumbrüche und Leerzeichen im Text zu steuern; Der Inhalt des Elements wird angezeigt.
• Unter diesen enthält das Textüberlaufattribut die folgenden Werte:

clip: Der Standardattributwert, der überschüssige Inhalt wird ausgeblendet ;

• Auslassungspunkte: Überschreitender Inhalt zeigt Auslassungspunkte (...) an.
• 2. Die spezifische Implementierungsmethode der CSS-Schriftart, die die Auslassung überschreitet

Einzeiliger Text, der die Auslassung überschreitet

Für eine einzelne Textzeile können wir die folgende Methode verwenden, um den Effekt zu erzielen, dass die Schriftart die Auslassungspunkte überschreitet:

.overflow-text {
  white-space: nowrap; /* 禁止换行 */
  text-overflow: ellipsis; /* 超出省略 */
  overflow: hidden; /* 溢出隐藏 */
}

Mit dem obigen Code können wir den Textinhalt ausblenden, der darüber hinausgeht die Breite des Containers und ersetzen Sie sie durch Ellipsen.

Mehrzeiliger Text überschreitet die Auslassung

2. Bei mehrzeiligem Text müssen Sie zuerst den Textinhalt umbrechen und dann den ausführen Beyond-Omission-Operation. Der spezifische Implementierungscode lautet wie folgt:

.overflow-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 控制显示行数 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 超出省略 */
}

Unter diesen wird -webkit-box-orient zur Auswahl der Richtung der Textfaltung und -webkit-line-clamp zur Steuerung der Zeilenanzahl verwendet Der Text wird angezeigt und überschreitet schließlich die Breite des Containers. Der Inhalt wird ausgeblendet und durch Ellipsen ersetzt.

3. Kompatibilitätsproblem beim Auslassen von CSS-Schriftartüberläufen

Es ist zu beachten, dass das Textüberlaufattribut in einigen Browsern möglicherweise nicht erkannt wird und daher mit einem Präfix versehen werden muss. Führen Sie die Kompatibilität durch Verarbeitung.

.overflow-text {
  white-space: nowrap;
  overflow: hidden;
  /* 兼容WebKit内核浏览器 */
  text-overflow: -webkit-ellipsis;
  /* 兼容非WebKit内核浏览器 */
  text-overflow: ellipsis;
}

4. Zusammenfassung

Mit der oben genannten Methode können wir leicht den Auslassungseffekt von Text außerhalb des Containerbereichs erzielen und die Seite schöner und einfacher gestalten lesen. In der tatsächlichen Entwicklung müssen wir bestimmte Werte anpassen, um die besten Ergebnisse zu erzielen, und Kompatibilitätsprobleme berücksichtigen, um eine korrekte Anzeige in verschiedenen Browsern sicherzustellen.

Das obige ist der detaillierte Inhalt vonCSS-Schriftart überschreitet Auslassung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!