Der CSS-Stil löst das Problem der Anzeige von Auslassungspunkten, wenn der Text zu lang ist
1. Der CSS-Stil löst das Problem der Anzeige von Auslassungspunkten bei zu langem Text1. Allgemeiner StilIm Allgemeinen kann bei CSS-Stilen ein Zeilenumbrucheffekt auftreten, wenn die Breite nicht ausreicht. Dieser Effekt ist manchmal definitiv nicht akzeptabel und Sie können den CSS-Stil ändern, um dieses Problem zu lösen.
<!DOCTYPE html>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Textüberlauf</title>
<link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
<style type="text/css">
.demo-split {
Breite: 500px;
Höhe: 100px;
Rand: 1px durchgezogen #dcdee2;
Hintergrund: blassgrün;
}
.demo-geteilter-Bereich {
Polsterung: 10px;
Farbe: rot;
}
</Stil>
</Kopf>
<Text>
<div id="app">
<div Klasse="demo-split">
<V-Modell aufteilen="aufteilen">
<div Slot="links" Klasse="demo-split-pane">
Keine Verwendung der adaptiven Clip-Breite</div>
<div slot="rechts" class="demo-split-pane">
Keine Verwendung von Auslassungspunkten mit adaptiver Breite</div>
</Teilen>
</div>
</div>
</body>
<Skripttyp="text/javascript">
neuer Vue({
el: '#app',
Daten() {
zurückkehren {
geteilt: 0,4
}
}
})
</Skript>
</html>Auf der linken Seite verringert sich die Breite, und der Text wird umbrochen.
Auf der rechten Seite verringert sich die Breite und der Text wird umbrochen.
2. Der Text ist zu lang und weist Auslassungspunkte oder einen Trunkierungseffekt auf
【Normalerweise geschrieben als:】
<style type="text/css">
.test_demo_clip {
Textüberlauf: Clip;
Überlauf: versteckt;
Leerzeichen: Nowrap;
Breite: 200px;
Hintergrund: blassgrün;
}
.test_demo_ellipsis {
Textüberlauf: Auslassungspunkte;
Überlauf: versteckt;
Leerzeichen: Nowrap;
Breite: 200px;
Hintergrund: blassgrün;
}
</Stil>
【veranschaulichen:】
Textüberlauf: Gibt an, ob bei einem Textüberlauf die Auslassungspunkte angezeigt werden sollen, „Ellipse“ gibt den Auslassungseffekt an und „Clip“ gibt den Clipping-Effekt an.
overflow:hidden; Überlaufenden Text ausblenden.
white-space:nowrap; verbietet Textumbruch.
Breite: (optional) Sie können einen festen Wert festlegen oder den Anzeigeeffekt so einstellen, dass er sich an die Breite anpasst.
<!DOCTYPE html>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Textüberlauf</title>
<link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
<style type="text/css">
.test_demo_clip {
Textüberlauf: Clip;
Überlauf: versteckt;
Leerzeichen: Nowrap;
Breite: 200px;
Hintergrund: blassgrün;
}
.test_demo_ellipsis {
Textüberlauf: Auslassungspunkte;
Überlauf: versteckt;
Leerzeichen: Nowrap;
Breite: 200px;
Hintergrund: blassgrün;
}
.test_demo_defined_Width_clip {
Textüberlauf: Clip;
Überlauf: versteckt;
Leerzeichen: Nowrap;
Hintergrund: Biskuitporzellan;
}
.test_demo_definierte_Breite_ellipsis {
Textüberlauf: Auslassungspunkte;
Überlauf: versteckt;
Leerzeichen: Nowrap;
Hintergrund: Biskuitporzellan;
}
.demo-split {
Breite: 500px;
Höhe: 100px;
Rand: 1px durchgezogen #dcdee2;
Hintergrund: blassgrün;
}
.demo-geteilter-Bereich {
Polsterung: 10px;
}
</Stil>
</Kopf>
<Text>
<div id="app">
<h2>Textüberlauf: Clip </h2>
<div Klasse="test_demo_clip">
Keine Auslassungszeichen anzeigen, sondern nur Zuschneidebalken</div>
<br>
<h2>Textüberlauf: Auslassungspunkte </h2>
<div Klasse="test_demo_ellipsis">
Wenn der Text über das Objekt hinausläuft, wird ein Auslassungszeichen angezeigt.
<br>
<h2>Benutzerdefinierte Breite, adaptive Größe entsprechend der Breite</h2>
<div Klasse="demo-split">
<V-Modell aufteilen="aufteilen">
<div Slot="links" Klasse="demo-split-pane">
<div Klasse="test_demo_defined_Width_clip">
Adaptive Breite des Clips verwenden</div>
</div>
<div slot="rechts" class="demo-split-pane">
<div Klasse="test_demo_defined_Width_ellipsis">
Verwenden Sie Auslassungspunkte mit adaptiver Breite</div>
</div>
</Teilen>
</div>
</div>
</body>
<Skripttyp="text/javascript">
neuer Vue({
el: '#app',
Daten() {
zurückkehren {
geteilt: 0,4
}
}
})
</Skript>
</html>Clip zeigt den Effekt des Zuschneidens und Ellipse zeigt den Effekt der Auslassungspunkte.
Zusammenfassen Oben ist der CSS-Stil, den ich Ihnen vorgestellt habe, um das Problem der Anzeige von Auslassungspunkten zu lösen, wenn der Text zu lang ist. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
>>: Einführung in 10 Hooks in React
Artikel empfehlen
Ein seltener Fehler und eine Lösung für die vollständige SQL Server-Sicherung
1. Fehlerdetails Als ich einmal manuell eine voll...
Starten Sie den Docker-Dienst neu, um den automatischen Start- und Stoppbefehl anzuwenden (empfohlen)
Schauen wir uns den Befehl zum Neustarten der Doc...
30 Minuten, um Ihnen ein umfassendes Verständnis von React Hooks zu vermitteln
Inhaltsverzeichnis Überblick 1. useState 1.1 Drei...
Verwendung des Linux-Befehls sed
1. Funktionseinführung sed (Stream EDitor) ist ei...
Detaillierte Erläuterung der ActiveMQ-Bereitstellungsmethode in der Linux-Umgebung
Dieser Artikel beschreibt die Bereitstellungsmeth...
Lernen Sie die Grundlagen von nginx
Inhaltsverzeichnis 1. Was ist nginx? 2. Was kann ...
MySQL 5.7.18 Installer Installation Download Grafik-Tutorial
Dieser Artikel enthält das ausführliche Installat...
Verwendung des Linux Dig-Befehls
Dig-Einführung: Dig ist ein Tool, das DNS einschl...
Der neueste Linux-Installationsprozess von Tomcat8
Herunterladen https://tomcat.apache.org/download-...
So generieren Sie ein kostenloses Zertifikat mit OpenSSL
1: Was ist OpenSSL? Welche Funktion hat es? Was i...
So erstellen Sie Komponenten in React
Inhaltsverzeichnis Vorwort Komponenteneinführung ...
Beschreibung des Meta-Viewport-Attributs in der HTML-Webseite
Beschreibung der HTML-Meta-Viewport-Attribute Was...
Aufbau einer Zookeeper-Standalone-Umgebung und einer Clusterumgebung
1. Aufbau einer Einzelmaschinenumgebung# 1.1 Heru...
Schreibreihenfolge und Namenskonventionen sowie Vorsichtsmaßnahmen im CSS-Stil
Die Bedeutung der Schreibreihenfolge Reduzieren S...
So behalten Sie den Inhalt im Container, wenn das Flex-Layout durch untergeordnete Elemente gestreckt wird
Auf Mobilgeräten ist das Flex-Layout sehr nützlic...